deviceManager/src/views/index.vue

<template>
  <div class="app-container" >
    <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 - 120px);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%;border:none;" 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 - 120px)">
                    <el-table-column label="告警时间" align="left" prop="alarmTime"  show-overflow-tooltip />
                    <el-table-column label="告警内容" align="left" prop="property"  show-overflow-tooltip />
                    <el-table-column label="设备名称" align="left" prop="deviceName"  show-overflow-tooltip />
                    <el-table-column label="设备编号" align="left" prop="deviceId"  show-overflow-tooltip />
                    <el-table-column label="设备类型" align="left" prop="deviceTypeName"  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" style="color:#6F99FA">{{collectList.checkCount}}</p>
                              <p class="des-huan">已处理</p>
                          </div>
                      </li>
                      <li>
                          <div>
                              <p class="num-huan" style="color:#6F99FA">{{collectList.noCheckCount}}</p>
                              <p class="des-huan">未处理</p>
                          </div>
                      </li>
                      <li>
                          <div>
                              <p class="num-huan" style="color:#6F99FA">{{Number((collectList.checkRadio)*100).toFixed(2)}}%</p>
                              <p class="des-huan">处理率</p>
                          </div>
                      </li>
                      <li>
                          <div>
                              <p class="num-huan" style="color:#6F99FA">{{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 - 61.8vh - 120px)">
                        <el-table-column label="序号" align="left" prop="id" />
                        <el-table-column label="告警值" align="left" prop="property" show-overflow-tooltip />
                        <el-table-column label="当前状态" align="left" prop="alarmStatus" >
                          <template slot-scope="scope">
                            <span :class="scope.row.alarmStatus == 1 ? 'processed' : 'unprocess'">{{ scope.row.alarmStatus == 1 ? '已处理': '未处理' }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="处理时间" align="left" 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() {
      getTbAlarm({current:1, size:500, type:1, startTime:YearMonthDate().split(" ")[0] + " 00:00:00",endTime:YearMonthDate()}).then(res=>{
        this.index4Data = res.data.records
      })
      let that = this
      let num = 0
      if ("WebSocket" in window) {
				this.ws = new WebSocket("ws://10.21.39.1:8084/dm/alarmPush");
				// console.log(this.ws)
				this.ws.onopen = ()=> {
				// console.log("websocket连接成功");
				this.sendWs({agentid:'admin'});
				};
				this.ws.onmessage = (res) => { //接收websocket消息

					let warningInfo = JSON.parse(res.data)
          if(warningInfo.property != "火警" && warningInfo.property != "故障"){
            that.index4Data.push(warningInfo)
          }
          if(num == '0'){
            if(that.initList.length>2){
              that.dataScrolling();
              num = 1
            }
          }
				};
				this.ws.onclose = ()=> { //关闭websocket
					// 关闭 websocket
					//console.log("连接已关闭...");
					//断线重新连接
					setTimeout(() => {
						this.initWebSocket();
					}, 2000);
				}
			} else {
				// 浏览器不支持 WebSocket
				alert("您的浏览器不支持 WebSocket!");
			}

    },
    sendWs(val){
			if (this.ws && this.ws.readyState == 1) {
				this.ws.send(JSON.stringify(val));
				// console.log('发送成功')
			} else {
				setTimeout(() => {
				  this.sendWs(val);
				}, 100);
			}
		},

  }
}
</script>

<style scoped lang="scss">
.app-container{
  width:calc(100% - 30px) !important;
  height: 91% !important;
}
  .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 - 120px);
        .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 - 120px);
      }
    }
    .card_right{
      .card_right1{
        height:calc(35.5vh - 20px);
        #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: 0.5vh 0 ;
}
#pop li:nth-child(2n){
  margin-left:10%;
}

.num-huan {
    font-size: 2vh;
    margin-top:4px;
}

.des-huan {
    max-width: 100%;
    font-size: 1.5vh;
    color: #000;
    margin-top:-15px;

}


.unprocess{
color: #FF5801
}
.processed {
    color: #37FF01;
}

</style>
<style>


</style>