<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5"
        ><div class="grid-content bg-purple">
          <div class="grid-content three" style="height: 750px;border-radius: 10px">
            <!-- 选择设备 -->
            <el-container style="padding: 0">
              <el-header
                class="smallHeader"
                style="height: 40px; line-height: 40px"
                >选择设备
              </el-header>
              <el-main class="smallmain tableBox">
                <p v-if="intelligent.length == 0" class="nodata">暂无数据</p>
                <div class="tagBox" v-else>
                  <el-button
                    style="width: 100%"
                    v-for="item in intelligent"
                    :key="item"
                    @click="handleClose(item)"
                    >{{ item.machineryName }}</el-button
                  >
                </div>
              </el-main>
            </el-container>
          </div>
        </div></el-col
      >
      <el-col :span="18" class="myfont"
        ><div class="content">
          <div style="height: 100px">
            <div style="width: 31px; margin-left: 9%">
              <el-image
                v-if="imgdata"
                :src="img"
                style="margin-top: 25px"
              ></el-image>
              <el-image v-else :src="imgs" style="margin-top: 25px"></el-image>
            </div>
          </div>
          <div style="height: 440px">
            <div style="height: 105px">
              <el-row
                type="flex"
                class="row-bg"
                justify="center"
                style="height: 18px"
              >
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 22%">
                    {{ intelligentData.feedSpeed }}
                  </div></el-col
                >
                <el-col :span="5"
                  ><div class="grid-content bg-purple-light"></div
                ></el-col>
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 25%">
                    {{ intelligentData.spindleSpeed }}
                  </div></el-col
                >
              </el-row>
              <el-row
                type="flex"
                class="row-bg"
                justify="center"
                style="margin-top: 6px; height: 18px"
              >
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 22%">
                    {{ intelligentData.rapidOverride }}
                  </div></el-col
                >
                <el-col :span="5"
                  ><div class="grid-content bg-purple-light"></div
                ></el-col>
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 25%">
                    {{ intelligentData.spindle }}
                  </div></el-col
                >
              </el-row>
              <el-row
                type="flex"
                class="row-bg"
                justify="center"
                style="margin-top: 7px; height: 18px"
              >
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 22%">
                    {{ intelligentData.feedRate }}
                  </div></el-col
                >
                <el-col :span="5"
                  ><div class="grid-content bg-purple-light"></div
                ></el-col>
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 25%">
                    {{ intelligentData.handWheel }}
                  </div></el-col
                >
              </el-row>
            </div>

            <div style="height: 158px">
              <el-row
                type="flex"
                class="row-bg"
                justify="center"
                style="height: 18px"
              >
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 60%">
                    {{ intelligentData.relativeX }}
                  </div></el-col
                >
                <el-col :span="5"
                  ><div class="grid-content bg-purple-light"></div
                ></el-col>
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 65%">
                    {{ intelligentData.machineX }}
                  </div></el-col
                >
              </el-row>
              <el-row
                type="flex"
                class="row-bg"
                justify="center"
                style="margin-top: 10px; height: 18px"
              >
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 60%">
                    {{ intelligentData.relativeY }}
                  </div></el-col
                >
                <el-col :span="5"
                  ><div class="grid-content bg-purple-light"></div
                ></el-col>
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 65%">
                    {{ intelligentData.machineY }}
                  </div></el-col
                >
              </el-row>
              <el-row
                type="flex"
                class="row-bg"
                justify="center"
                style="margin-top: 15px; height: 18px"
              >
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 60%">
                    {{ intelligentData.relativeZ }}
                  </div></el-col
                >
                <el-col :span="5"
                  ><div class="grid-content bg-purple-light"></div
                ></el-col>
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 65%">
                    {{ intelligentData.machineZ }}
                  </div></el-col
                >
              </el-row>
              <el-row
                type="flex"
                class="row-bg"
                justify="center"
                style="margin-top: 12px; height: 18px"
              >
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 60%">
                    {{ intelligentData.relativeA }}
                  </div></el-col
                >
                <el-col :span="5"
                  ><div class="grid-content bg-purple-light"></div
                ></el-col>
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 65%">
                    {{ intelligentData.machineA }}
                  </div></el-col
                >
              </el-row>
            </div>

            <div>
              <el-row
                type="flex"
                class="row-bg"
                justify="center"
                style="height: 18px"
              >
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 60%">
                    {{ intelligentData.absoluteX }}
                  </div></el-col
                >
                <el-col :span="5"
                  ><div class="grid-content bg-purple-light"></div
                ></el-col>
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 65%">
                    {{ intelligentData.residualX }}
                  </div></el-col
                >
              </el-row>
              <el-row
                type="flex"
                class="row-bg"
                justify="center"
                style="margin-top: 10px; height: 18px"
              >
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 60%">
                    {{ intelligentData.absoluteY }}
                  </div></el-col
                >
                <el-col :span="5"
                  ><div class="grid-content bg-purple-light"></div
                ></el-col>
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 65%">
                    {{ intelligentData.residualY }}
                  </div></el-col
                >
              </el-row>
              <el-row
                type="flex"
                class="row-bg"
                justify="center"
                style="margin-top: 15px; height: 18px"
              >
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 60%">
                    {{ intelligentData.absoluteZ }}
                  </div></el-col
                >
                <el-col :span="5"
                  ><div class="grid-content bg-purple-light"></div
                ></el-col>
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 65%">
                    {{ intelligentData.residualZ }}
                  </div></el-col
                >
              </el-row>
              <el-row
                type="flex"
                class="row-bg"
                justify="center"
                style="margin-top: 12px; height: 18px"
              >
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 60%">
                    {{ intelligentData.absoluteA }}
                  </div></el-col
                >
                <el-col :span="5"
                  ><div class="grid-content bg-purple-light"></div
                ></el-col>
                <el-col :span="6"
                  ><div class="grid-content bg-purple" style="margin-left: 65%">
                    {{ intelligentData.residualA }}
                  </div></el-col
                >
              </el-row>
            </div>
          </div>
          <div style="height: 350px">
            <el-row
              type="flex"
              class="row-bg"
              justify="center"
              style="margin-bottom: 15px; height: 50px"
            >
              <el-col :span="6"
                ><div class="grid-content bg-purple" style="margin-left: 40%">
                  <!-- {{1}} -->
                </div></el-col
              >
              <el-col :span="6"
                ><div
                  class="grid-content bg-purple-light"
                  style="margin-left: 20%"
                >
                  <!-- {{ 2 }} -->
                </div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple" style="margin-left: 35%">
                  <!-- {{ 3 }} -->
                </div></el-col
              >
              <el-col :span="6"
                ><div
                  class="grid-content bg-purple-light"
                  style="margin-left: 8%"
                >
                  <!-- {{ 4 }} -->
                </div></el-col
              >
            </el-row>

            <el-row
              type="flex"
              class="row-bg"
              justify="center"
              style="margin-bottom: 15px; height: 50px"
            >
              <el-col :span="6"
                ><div class="grid-content bg-purple" style="margin-left: 40%">
                  <!-- {{ 1 }} -->
                </div></el-col
              >
              <el-col :span="6"
                ><div
                  class="grid-content bg-purple-light"
                  style="margin-left: 20%"
                >
                  <!-- {{ 2 }} -->
                </div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple" style="margin-left: 35%">
                  <!-- {{ 3 }} -->
                </div></el-col
              >
              <el-col :span="6"
                ><div
                  class="grid-content bg-purple-light"
                  style="margin-left: 8%"
                >
                  <!-- {{ 4 }} -->
                </div></el-col
              >
            </el-row>
            <el-row
              type="flex"
              class="row-bg"
              justify="center"
              style="margin-bottom: 15px; height: 50px"
            >
              <el-col :span="6"
                ><div class="grid-content bg-purple" style="margin-left: 40%">
                  <!-- {{ 1 }} -->
                </div></el-col
              >
              <el-col :span="6"
                ><div
                  class="grid-content bg-purple-light"
                  style="margin-left: 20%"
                >
                  <!-- {{ 2 }} -->
                </div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple" style="margin-left: 35%">
                  <!-- {{ 3 }} -->
                </div></el-col
              >
              <el-col :span="6"
                ><div
                  class="grid-content bg-purple-light"
                  style="margin-left: 8%"
                >
                  <!-- {{ 4 }} -->
                </div></el-col
              >
            </el-row>
            <el-row
              type="flex"
              class="row-bg"
              justify="center"
              style="margin-bottom: 15px; height: 50px"
            >
              <el-col :span="6"
                ><div class="grid-content bg-purple" style="margin-left: 40%">
                  <!-- {{ 1 }} -->
                </div></el-col
              >
              <el-col :span="6"
                ><div
                  class="grid-content bg-purple-light"
                  style="margin-left: 20%"
                >
                  <!-- {{ 2 }} -->
                </div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple" style="margin-left: 35%">
                  <!-- {{ 3 }} -->
                </div></el-col
              >
              <el-col :span="6"
                ><div
                  class="grid-content bg-purple-light"
                  style="margin-left: 8%"
                >
                  <!-- {{ 4 }} -->
                </div></el-col
              >
            </el-row>

            <el-row
              type="flex"
              class="row-bg"
              justify="center"
              style="margin-bottom: 15px; height: 50px"
            >
              <el-col :span="6"
                ><div class="grid-content bg-purple" style="margin-left: 40%">
                  <!-- {{ 1 }} -->
                </div></el-col
              >
              <el-col :span="6"
                ><div
                  class="grid-content bg-purple-light"
                  style="margin-left: 20%"
                >
                  <!-- {{ 2 }} -->
                </div></el-col
              >
              <el-col :span="6"
                ><div
                  class="grid-content bg-purple-light"
                  style="margin-left: 35%"
                ></div
              ></el-col>
              <el-col :span="12"
                ><div
                  class="grid-content bg-purple-light"
                  style="margin-left: 59%"
                >
                  <el-button
                    type="danger"
                    style="margin-top: 17%; height: 40px"
                    @click="off"
                  ></el-button>
                  <el-button
                    type="success"
                    style="margin-top: 17%; height: 40px; margin-left: 18%"
                    @click="on"
                  ></el-button></div
              ></el-col>
            </el-row>
          </div></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import { listMachinery } from "@/api/mes/dv/machinery";
import { listMachinerytype } from "@/api/mes/dv/machinerytype";
import axios from "axios";
import "@/assets/font/font.css";
export default {
  data() {
    return {
      intelligent: [],
      intelligentData: {},
      // 遮罩层
      loading: true,
      id: "",
      imgdata: true,
      timer: null,
      img: require("../../../assets/images/close.png"),
      imgs: require("../../../assets/images/open.png"),
      machineryTypeOptions: [],
      machinerydata: {
        pageNum: 1,
        pageSize: 10,
        machineryTypeId: "",
      },
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    // 定时刷新
    this.timer = setInterval(() => {
      if (this.id != "") {
        this.setInterval();
      }
    }, 1500);
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      clearInterval(this.timer);
    });
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // axios
      //   .get("http://192.168.3.53:8077/manage/device/devices")
      //   .then((res) => {
      //     this.intelligent = res.data.data;
      //     this.loading = false;
      //   });

      listMachinerytype().then((response) => {
        var data = "";
        response.data.forEach((item) => {
          if (item.machineryTypeCode == "M_TYPE_001") {
            data = item.machineryTypeId;
          }
        });
        this.machinerydata.machineryTypeId = data;
        this.listMachineryitem();
      });
    },

    listMachineryitem() {
      listMachinery(this.machinerydata).then((response) => {
        response.rows.forEach((item) => {
          if (item.ip != null) {
            this.intelligent.push(item);
          }
        });
        this.loading = false;
      });
    },

    handleClose(item) {
      this.id = item.machineryId;
      this.setInterval();
    },

    setInterval() {
      axios
        .get("http://192.168.3.53:8077/manage/modbus/data", {
          params: {
            id: this.id,
          },
        })
        .then((res) => {
          this.intelligentData = res.data.data;
        });
    },

    off() {
      if (this.id != "") {
        axios
          .get("http://192.168.3.53:8077/manage/modbus/operate", {
            params: {
              id: this.id,
              type: 2,
            },
          })
          .then((res) => {
            this.imgdata = true;
            this.$modal.msgSuccess("停止成功");
          });
      } else {
        this.$message({
          message: "请选择设备",
          type: "warning",
        });
      }
    },
    on() {
      if (this.id != "") {
        axios
          .get("http://192.168.3.53:8077/manage/modbus/operate", {
            params: {
              id: this.id,
              type: 1,
            },
          })
          .then((res) => {
            this.imgdata = false;
            this.$modal.msgSuccess("启动成功");
          });
      } else {
        this.$message({
          message: "请选择设备",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.myfont {
  font-family: "Ayuthaya"; // 这里的 Ayuthaya 是引入时的自定义名字
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.el-button + .el-button {
  margin-left: 0px !important;
}

.app-containers ::-webkit-scrollbar {
  display: none;
}

.image {
  width: 300px;
  height: 200px;
}

.one,
.three,
.two {
  height: 510px;
  width: 100%;
  overflow: scroll;
  border: solid 1px #dadada;
}
.one {
  width: 95%;
}
.two {
  border: 1px solid transparent;
}
.three {
  width: 99%;
  box-sizing: border-box;
  margin-left: 5%;
}
.title {
  line-height: 24px;
  font-size: 18px;
  color: #302933;
  padding-bottom: 5px;
  border-bottom: solid 1px #dadada;
  margin-bottom: 15px;
  margin-top: -23px;
}
.el-main,
.smallmain {
  padding: 0;
}

.smallHeader {
  background-color: #e0e8f0;
  position: relative;
  color: #7a8289;
  font-weight: 700;
}
.content {
  position: relative;
  width: 70%;
  margin: 0 auto 20px;
  background: url("../../../assets/images/machine.png") no-repeat center;
  background-size: 100% 100%;
}

.but1 {
  position: absolute;
  right: 20px;
  top: 4px;
}
.open,
.smallmain >>> .el-tree-node:focus > .el-tree-node__content {
  background-color: #83bff8 !important;
}
.smallmain >>> .el-tree-node__content:hover {
  background-color: #dadada;
}
.smallmain
  >>> .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #83bff8;
}
.tableBox >>> .el-table {
  margin: 0;
}
.radio {
  position: relative;
}
.nodata {
  width: 100%;
  text-align: center;
  line-height: 40px;
  height: 40px;
}
.tagBox {
  width: 100%;
}
.tag {
  width: 100%;
  height: 38px;
}
.tagItem {
  display: inline-block;
  width: calc(100% / 3.2);
  text-align: center;
  margin-top: 5px;
  /* 单行文本溢出省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
::v-deep .el-tag .el-icon-close {
  top: -9px;
}
.wrapBox >>> .el-table__body tr.current-row > td {
  background-color: #83bff8 !important;
}
.wrapBox >>> .el-table tbody tr:hover > td {
  background-color: #dadada;
}
::v-deep .el-tag {
  margin-left: 0px;
}
</style>
