<template>
  <div class="analysis">
    <a-row>
      <a-col :sm="24" :md="12" :xl="12">
        <h2 style="text-align: center;">{{this.$route.params.title}}</h2>
        <img
          src="@/assets/img/20211209164229.png"
        />
      </a-col>

      <a-col :sm="24" :md="12" :xl="12">
        <div class="contour">
          <div style="height: 80px">
            <span class="info">
              <div>撕裂</div>
              <div class="waring1" v-if="circle1 == 1"></div>
              <div class="waring" v-if="circle1 == 0"></div>
            </span>
            <span class="info">
              <div>闭锁</div>
              <div class="waring" v-if="circle2 == 1"></div>
              <div class="waring1" v-if="circle2 == 0"></div>
            </span>
            <span class="info">
              <div>跑偏</div>
              <div class="waring" v-if="circle3 == 1"></div>
              <div class="waring1" v-if="circle3 == 0"></div>
            </span>
            <span class="info">
              <div>烟雾</div>
              <div class="waring" v-if="circle4 == 1"></div>
              <div class="waring1" v-if="circle4 == 0"></div>
            </span>
            <span class="info">
              <div>堆煤</div>
              <div class="waring" v-if="circle5 == 1"></div>
              <div class="waring1" v-if="circle5 == 0"></div>
            </span>
          </div>
          <div style="height: 200px">
            <span class="info">
              <div>速度</div>
              <div class="waring" v-if="circle6 == 1"></div>
              <div class="waring1" v-if="circle6 == 0"></div>
            </span>
            <span class="info">
              <div>温度</div>
              <div class="waring" v-if="circle7 == 1"></div>
              <div class="waring1" v-if="circle7 == 0"></div>
            </span>
            <span class="info">
              <div>打滑</div>
              <div class="waring" v-if="circle8 == 1"></div>
              <div class="waring1" v-if="circle8 == 0"></div>
            </span>
            <span class="info">
              <div>纵撕</div>
              <div class="waring" v-if="circle9 == 1"></div>
              <div class="waring1" v-if="circle9 == 0"></div>
            </span>
            <span class="info">
              <div>断带</div>
              <div class="waring" v-if="circle10 == 1"></div>
              <div class="waring1" v-if="circle10 == 0"></div>
            </span>
          </div>
        </div>
      </a-col>
    </a-row>

    <a-card :loading="loading" style="margin-top: 24px" :bordered="false">
      <div class="salesCard">
        <a-row>
          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card
              :bodyStyle="{display: 'flex', justifyContent: 'center',alignItems: 'center'}"
            >
              <chart-1 ref="chart1" />
            </a-card>
          </a-col>
          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card
              :bodyStyle="{display: 'flex', justifyContent: 'center',alignItems: 'center'}"
            >
              <chart-2 ref="chart2" />
            </a-card>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card
              :bodyStyle="{display: 'flex', justifyContent: 'center',alignItems: 'center'}"
            >
              <chart-3 ref="chart3" />
            </a-card>
          </a-col>
          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card
              :bodyStyle="{display: 'flex', justifyContent: 'center',alignItems: 'center'}"
            >
              <chart-4 ref="chart4" />
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-card>
  </div>
</template>

<script>
import Chart1 from "./Chart1.vue";
import Chart2 from "./Chart2.vue";
import Chart3 from "./Chart3.vue";
import Chart4 from "./Chart4.vue";

export default {
  name: "Analysis",
  data() {
    return {
      path: "ws://124.71.174.198:8080/ws/belt/",
      beltId: 1,
      isFirst: 1,
      ws: {},
      circle1: 1,
      circle2: 1,
      circle3: 1,
      circle4: 1,
      circle5: 1,
      circle6: 1,
      circle7: 1,
      circle8: 1,
      circle9: 1,
      circle10: 1,
      //rankList,
      loading: true,
    };
  },
  methods: {
    change_color: function () {
      this.circle1 = Math.round(Math.random() * 2) % 2;
      this.circle2 = Math.round(Math.random() * 2) % 2;
      this.circle3 = Math.round(Math.random() * 2) % 2;
      this.circle4 = Math.round(Math.random() * 2) % 2;
      this.circle5 = Math.round(Math.random() * 2) % 2;
      this.circle6 = Math.round(Math.random() * 2) % 2;
      this.circle7 = Math.round(Math.random() * 2) % 2;
      this.circle8 = Math.round(Math.random() * 2) % 2;
      this.circle9 = Math.round(Math.random() * 2) % 2;
      this.circle10 = Math.round(Math.random() * 2) % 2;
    },
    //websocket连接后端数据改变颜色
    //1：为绿色，0：为红色
    changecolor_websocket: function () {
      this.ws = new WebSocket(this.path);
      //监听是否连接成功
      this.ws.onopen = () => {
        console.log("ws连接状态：" + this.ws.readyState);
      };
      //接听服务器发回的信息并处理展示
      this.ws.onmessage = (res) => {
        console.log("接收到来自服务器的消息：");
        console.log(res.data);
        this.circle1 = res.data[0];
        this.circle2 = res.data[1];
        this.circle3 = res.data[2];
        this.circle4 = res.data[3];
        this.circle5 = res.data[4];
        this.circle6 = res.data[5];
        this.circle7 = res.data[6];
        this.circle8 = res.data[7];
        this.circle9 = res.data[8];
        this.circle10 = res.data[9];
      };
      //监听连接关闭事件
      this.ws.onclose = () => {
        //监听整个过程中websocket的状态
        console.log("ws连接状态：" + this.ws.readyState);
      };
      //监听并处理error事件
      this.ws.onerror = function (error) {
        console.log(error);
      };
    },
    init() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        this.socket = new WebSocket(this.path);
        this.socket.onopen = this.open;
        this.socket.onerror = this.error;
        this.socket.onmessage = this.getMessage;
      }
    },
    open() {
      console.log("socket连接成功");
    },
    error() {
      console.log("连接错误");
    },
    getMessage(msg) {
      let item = JSON.parse(msg.data);
      if(this.isFirst === 1){
        this.isFirst = 0;
        return;
      }
      if (item.error_code === 0 && this.isFirst === 0) {
        console.log(item.data);
        const {
          datetime,
          dianjicurrent,
          pressure,
          speed,
          bpqcurrent,
        } = item.data;
        let postdatetime = datetime.split('.')[0]
        this.$refs.chart1.addData(postdatetime, dianjicurrent);
        this.$refs.chart2.addData(postdatetime, pressure);
        this.$refs.chart3.addData(postdatetime, speed);
        this.$refs.chart4.addData(postdatetime, bpqcurrent);
      }
    },
    send() {},
    close() {
      console.log("socket已经关闭");
    },
  },
  created() {
    setTimeout(() => (this.loading = !this.loading), 1000);
    setInterval(this.change_color, 5000);
    this.$refs.chart1.test();
  },
  components: {
    Chart1,
    Chart2,
    Chart3,
    Chart4,
  },
  destroyed() {
    this.socket.onclose = this.close;
  },
  mounted() {
    const beltId = this.$route.params.id;
    this.path = this.path + beltId;
    this.init();
  }
};
</script>

<style lang="less" scoped>
.extra-wrap {
  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a:not(:first-child) {
      margin-left: 24px;
    }
  }
}

@media screen and (max-width: 992px) {
  .extra-wrap .extra-item {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  .extra-wrap {
    display: none;
  }
}

.info {
  float: left;
  margin: 10px;
}

.contour {
  outline-style: dotted;
  outline-color: gray;
  height: 200px;
  width: 400px;
  margin: 20px 0px 50px 60px;
}

.waring {
  width: 60px;
  height: 60px;
  background-color: #009966;
  border-radius: 50%;
  float: left;
}

.waring1 {
  width: 60px;
  height: 60px;
  background-color: #ff0000;
  border-radius: 50%;
  float: left;
}
</style>
