<template>
  <div
    id="screen"
    class="allShow"
    :style="{
      width: `${style.width}px`,
      height: `${style.height}px`,
      transform: `${style.transform}`,
    }"
  >
    <div class="first-station">
      <el-row style="box-shadow: inset 0 0 30px rgb(24, 78, 135)">
        <div style="height: 80px; width: 1918px">
          <el-col :span="6">
            <div
              style="
                display: flex;
                align-items: center;
                margin-top: 0px;
                height: 80px;
                margin-left: 10px;
              "
            >
              <img style="height: 60px; margin-left: 50px" :src="titlePng" />
              <img
                style="height: 40px; margin-left: 50px; width: 140px"
                :src="titlePng1"
              />
            </div>
          </el-col>
          <el-col :span="12">
            <div style="font-size: 3rem; color: white; text-align: center">
              <span
                style="
                  font-size: 3rem;
                  text-align: center;
                  letter-spacing: 5px;
                  font-weight: bolder;
                  background: linear-gradient(to bottom, white, #add8e6);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                  background-clip: text;
                  color: transparent;
                "
                >清智智能系统</span
              >
            </div>
          </el-col>
          <el-col :span="6">
            <div
              style="
                color: white;
                float: right;
                font-size: 1.7rem;
                margin-top: 20px;
                margin-right: 25%;
              "
            >
              <el-col style="font-size: 30px">
                <span>{{ this.year + "/" + this.month + "/" + this.day }}</span>
                <span style="margin-left: 10px">{{
                  this.hour + ":" + this.minute + ":" + this.second
                }}</span>
              </el-col>
            </div>
          </el-col>
        </div>
      </el-row>
      <el-row style="box-shadow: inset 0 0 30px #082049; height: 1000px">
        <el-col
          :span="2"
          style="height: 960px; background-color: rgb(219 219 219)"
        >
          <div style="display: flex; flex-direction: column">
            <div id="menu_1" class="show-label-title" @click="selectPage(1)">
              设备信息
            </div>
            <div id="menu_2" class="show-label-title" @click="selectPage(2)">
              产量信息
            </div>
            <div id="menu_3" class="show-label-title" @click="selectPage(3)">
              质量管理
            </div>
            <div id="menu_4" class="show-label-title" @click="selectPage(4)">
              刀具管理
            </div>
            <div id="menu_5" class="show-label-title" @click="selectPage(5)">
              能源管理
            </div>
            <div id="menu_6" class="show-label-title" @click="selectPage(6)">
              工艺管理
            </div>
            <div id="menu_7" class="show-label-title" @click="selectPage(7)">
              程序管理
            </div>
            <div id="menu_8" class="show-label-title" @click="selectPage(8)">
              报警管理
            </div>
            <div
              id="menu_999"
              class="show-label-title"
              @click="selectPage(999)"
            >
              退出
            </div>
          </div>
        </el-col>
        <el-col :span="22" style="height: 1000px; background-color: #082049">
          <div style="background-color: #082049; margin: 0; height: 1000px">
            <deviceManagementPage
              ref="deviceManagementPage"
              v-if="pageIndexShow === 1"
            />
            <planeManagementPage
              v-else-if="pageIndexShow === 2"
              :opname="station"
            />
            <qualityAssurancePage
              v-else-if="pageIndexShow === 3"
              :opname="station"
            />
            <toolManagementPage
              v-else-if="pageIndexShow === 4"
              :opname="station"
            />
            <energyManagementPage
              v-else-if="pageIndexShow === 5"
              :opname="station"
            />
            <processManagementPage
              v-else-if="pageIndexShow === 6"
              :opname="station"
            />
            <program-management-page
              v-else-if="pageIndexShow === 7"
              :opname="station"
            />
            <alarm-management-page
              v-else-if="pageIndexShow === 8"
              :opname="station"
            />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { wsuri, opname, opnameBs, mqttIp, mqttPort } from "@/utils/request";
import mqtt from "mqtt";
// import { formatTime } from '@/utils/tool'
import orderManagementPage from "@/views/page/orderManagementPage";
import qualityAssurancePage from "@/views/page/qualityAssurancePage";
import toolManagementPage from "@/views/page/toolManagementPage";
import planeManagementPage from "@/views/page/planeManagementPage";
import andonCallPage1 from "@/views/page/andonCallPage1";
import deviceManagementPage from "@/views/page/deviceManagementPage";
import processManagementPage from "@/views/page/processManagementPage";
import energyManagementPage from "@/views/page/energyManagementPage";
import programManagementPage from "@/views/page/programManagementPage";
import alarmManagementPage from "@/views/page/alarmManagementPage";
import axios from "axios";
import $ from "jquery";
export default {
  components: {
    orderManagementPage: orderManagementPage,
    qualityAssurancePage: qualityAssurancePage,
    toolManagementPage: toolManagementPage,
    planeManagementPage: planeManagementPage,
    andonCallPage1: andonCallPage1,
    deviceManagementPage: deviceManagementPage,
    processManagementPage: processManagementPage,
    energyManagementPage: energyManagementPage,
    alarmManagementPage: alarmManagementPage,
    programManagementPage: programManagementPage,
  },
  data() {
    return {
      style: {
        width: "1920",
        height: "1080",
        transform: "scaleY(1) scaleX(1) translate(-50%, -50%)",
      },
      titlePng: "",
      titlePng1: "",
      IsAllowConnect: true,
      mqttClient: null,
      flag: false,
      currentBeat: 0,
      planBeat: 0,
      AndonCallList: [],
      FeedRate: 100,
      SpindleSpeed: 100,
      pageType: 0,
      dialogVisible: false,
      websock: null,
      DTSRC: "",
      test1: "",
      programeNumber: "LG00125A", // 配方 名称
      ProductNumber: "LG00125B", // 产品编号
      productTypeNumber: "LG00125C", // 产品型号代码
      operator: "员工1",
      shift: "班次一",
      dailyOutput: "1000",
      stationName: "", // 工位名称
      scanner: "", // 扫描枪
      ProductType: "", // 产品型号
      lightStatus: {
        auto: 0, // 自动模式
        manual: 0, // 手动模式
        emergency: 0, // 急停模式
        shutdown: 0, // 停机模式
        work: 0, // 加工状态
        ready: 0, // 待机状态
        off: 1, // 关机状态
        alarm: 0, // 报警状态
      },
      communicationStatus: "",
      activeName: "first1",
      title: "",
      loading: false,
      tableData: [],
      tableData1: [],
      ID: "",
      station: "",
      stationOutput: "",
      stationNumberID: "",
      partID: "",
      titleEdit: "",
      date: new Date(),
      month: "",
      day: "",
      minute: "",
      hour: "",
      year: "",
      second: "",
      week: "",
      machineInfo_position: {},
      machineInfo_position1: {
        relative: [0, 0, 0, 0, 0],
        absolute: [0, 0, 0, 0, 0],
        machine: [0, 0, 0, 0, 0],
        distance: [0, 0, 0, 0, 0],
        feedRateAxis: [0, 0, 0, 0, 0],
        servoLoad: [0, 0, 0, 0, 0],
        spindleSpeedAxis: [0, 0, 0, 0, 0],
      },
      machineInfo_tool: {
        toolNum: 0,
        toolLife: 1,
        surplus: 100,
        toolCount: 0,
        thresholdValue1: 0,
        thresholdValue2: 0,
        residue: 0,
      },
      machineInfo_time: {
        startTime: "0 H 0 M 0 S",
        cuttingTime: "0 H 0 M 0 S",
        workTime: "0 H 0 M 0 S",
        cyclingTime: "0 H 0 M 0 S",
      },
      machineInfo_work: {
        partCount: "0",
        spindleSpeed: "0",
        feedRate: "0",
        currentToolNum: "0",
        servoLoad: [0, 0, 0],
        programNumber: "[0]  [0]",
      },
      processColor: "#16c1a0",
      timer: null,
      timerInit: null,
      notifyPromise: Promise.resolve(),
      pageIndexShow: 1,
      pageIndexShow_Last: 1,
    };
  },
  // 通过路由把index3中 点击的工位号 和 是否存在订单 值传进本页
  watch: {
    $route: {
      handler(route) {
        this.station = this.$route.query.OP;
        this.stationId = this.$route.query.工位号id;
        this.DTSRC = "http://127.0.0.1:8082/#/?" + this.station;
        // this.DTSRC = 'http://192.168.63.15:8956/#/?' + this.station
      },
      immediate: true,
    },
  },
  computed: {},
  mounted() {
    document.getElementById(`menu_1`).style.backgroundColor = "#fff";
    document.getElementById(`menu_1`).style.color = "#000000";
    this.initMqtt();
    const _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = new Date(); // 修改数据date
      this.year =
        new Date().getFullYear() + 1 < 10
          ? "0" + (new Date().getFullYear() + 1)
          : new Date().getFullYear();
      this.month =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      this.day =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      this.hour =
        new Date().getHours() < 10
          ? "0" + new Date().getHours()
          : new Date().getHours();
      this.minute =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      this.second =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      this.week = "日一二三四五六".charAt(new Date().getDay());
    }, 1000);
    this.timer = setInterval(() => {
      this.init();
    }, 5000);
    this.setScale();
    /* 窗口改变事件*/
    $(window).resize(() => {
      this.setScale();
    });
  },
  created() {
    this.getLogo();
  },
  beforeDestroy() {
    if (this.websock) this.websock.onclose(wsuri);
    clearInterval(this.timer);
    clearInterval(this.timerInit);
    if (this.mqttClient) this.mqttClient.end();
  },
  methods: {
    getScale() {
      const w = window.innerWidth / this.style.width;
      const h = window.innerHeight / this.style.height;
      return { x: w, y: h };
    },
    setScale() {
      const scale = this.getScale();
      this.style.transform =
        "scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(-50%, -50%)";
    },
    selectPage(pageIndex) {
      if (pageIndex === 999) {
        this.$router.push("/");
        return;
      }
      document.getElementById(`menu_${pageIndex}`).style.backgroundColor =
        "#fff";
      document.getElementById(`menu_${pageIndex}`).style.color = "#000000";
      if (this.pageIndexShow_Last !== pageIndex) {
        document.getElementById(
          `menu_${this.pageIndexShow_Last}`
        ).style.backgroundColor = "#ffaa13";
        document.getElementById(`menu_${this.pageIndexShow_Last}`).style.color =
          "#fff";
      }
      this.pageIndexShow = pageIndex;
      this.pageIndexShow_Last = pageIndex;
    },
    init() {},
    format(percentage) {
      return `剩余${percentage}%`;
    },
    initWebsocket() {
      // 初始化websocket
      this.websock = new WebSocket(wsuri); // 这里面的this都指向vue
      this.websock.onopen = this.websocketopen;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onclose = this.websocketclose;
      this.websock.onerror = this.websocketerror;
    },
    websocketopen() {
      // 打开
      this.$message.success("连接成功!");
      this.websock.send("{<" + opname + ">}");
      setTimeout(() => {
        this.websockeSendMessage("B_C_DT_WebLoaded", this.station);
      }, 2000);
    },
    websocketonmessage(msg) {
      // 数据接收
      this.msg = msg;
      try {
        // 返回的数据msg.data，包含了协议中的4部分9
        // TOBS??SCADADetailed?MES|Current|opName|电流^电压
        var arrays_signal = msg.data.split("|");
        var interFaceType = arrays_signal[0];
        var m_Opname = arrays_signal[1];
        var dataType = arrays_signal[2];
        var m_data = arrays_signal[3];
        if (this.pageIndexShow !== 1) return;
        switch (interFaceType) {
          case "MES":
            switch (dataType) {
              case "C_B_MoveInfo":
                {
                  const J_data = JSON.parse(m_data);
                  this.$refs.deviceManagementPage.receiveMessage(
                    "C_B_MoveInfo",
                    m_Opname,
                    J_data
                  );
                }
                break;
              case "C_B_TimeInfo":
                {
                  const J_data = JSON.parse(m_data);
                  this.$refs.deviceManagementPage.receiveMessage(
                    "C_B_TimeInfo",
                    m_Opname,
                    J_data
                  );
                }
                break;
              case "C_B_WorkInfo":
                {
                  const J_data = JSON.parse(m_data);
                  this.$refs.deviceManagementPage.receiveMessage(
                    "C_B_WorkInfo",
                    m_Opname,
                    J_data
                  );
                }
                break;
              case "C_B_StatusInfo":
                {
                  const J_data = JSON.parse(m_data);
                  this.$refs.deviceManagementPage.receiveMessage(
                    "C_B_StatusInfo",
                    m_Opname,
                    J_data
                  );
                }
                break;
              case "C_B_QtyInfo":
                {
                  const J_data = JSON.parse(m_data);
                  this.$refs.deviceManagementPage.receiveMessage(
                    "C_B_QtyInfo",
                    m_Opname,
                    J_data
                  );
                }
                break;
            }
            break;
        }
      } catch (exception) {
        var error = exception.toString();
        console.log(error);
      }
    },
    websocketclose() {
      // 关闭
      this.$message.error("WebSocket断开连接!重新连接");
      setTimeout(() => {
        this.initWebsocket();
      }, 2000);
    },
    websocketerror() {
      // 失败
      console.log("WebSocket连接失败");
    },
    websockeSendMessage(dataType, data) {
      this.websock.send(opnameBs + dataType + "|" + data);
    },
    searchTableOpName() {
      var param = [];
      param[0] = ["stationNumber", this.stationId];
      var Data1 = this.CreateData("11", "AAA临工看板_工位信息_查询数据", param);
      this.ExecDatabase(Data1).then((response) => {
        this.stationName = response.data[0].工位名称;
        this.station = response.data[0].工位号;
      });
    },
    initMqtt() {
      const scope = this;
      const connection = {
        host: mqttIp,
        port: mqttPort,
        endpoint: "/mqtt",
        clean: true, // 保留会话
        connectTimeout: 4000, // 超时时间
        reconnectPeriod: 4000, // 重连时间间隔
        // 认证信息
        clientId: "mqttjs_3be2c321" + new Date().getTime(), // 同一个ID 无法二次连接
        username: "DT_WEB2",
        password: "",
      };
      const subscription = {
        topic: opname,
        qos: 0,
      };
      const { host, port, endpoint, ...options } = connection;
      const connectUrl = `ws://${host}:${port}${endpoint}`;
      try {
        this.mqttClient = mqtt.connect(connectUrl, options);
      } catch (error) {
        console.log("MQTT connect error", error);
      }

      this.mqttClient.on("connect", () => {
        this.$message.success("加载完成，连接MQTT服务器成功！");
        console.log("MQTT Connection succeeded!");
        const { topic, qos } = subscription;
        this.mqttClient.subscribe(topic, { qos }, (error, res) => {
          if (error) {
            console.log("Subscribe to topics error", error);
          }
        });
      });
      this.mqttClient.on("error", (error) => {
        console.log("MQTT Connection failed", error);
        try {
          scope.$message.error("MQTT服务器连接失败");
          if (scope.IsAllowConnect) {
            // 显示一下
            scope.$message.warning("重新连接MQTT服务器");
            console.log("重新连接MQTT服务器");
            // 重新连接,打开计时器
            setTimeout(function () {
              scope.initMqtt();
            }, 5000);
          }
        } catch (exception) {
          const error = exception.toString();
          scope.$message.error("MQTT服务器出现错误,关闭连接" + error);
        }
      });
      // 接收消息
      this.mqttClient.on("message", (topic, message) => {
        try {
          scope.websocketonmessage({ data: message.toString() });
        } catch (exception) {
          console.log(exception.toString());
        }
      });
    },
    // 查询机床状态
    searchMachineStatus() {
      var param = [];
      param[0] = ["opName", this.station];
      var Data = this.CreateData(
        "11",
        "LG_临工看板_设备管理_查询当前状态",
        param
      );
      this.ExecDatabase(Data).then((res) => {
        if (res.data.length > 0) {
          const datum = res.data[0];
          if (datum.StatusCode === 5) {
            this.lightStatus.alarm = 0;
            this.lightStatus.ready = 0;
            this.lightStatus.work = 0;
            this.lightStatus.off = 1;
          } else {
            this.lightStatus.alarm = 0;
            this.lightStatus.ready = 1;
            this.lightStatus.work = 0;
            this.lightStatus.off = 0;
            if (datum.StatusCode === 1) {
              this.lightStatus.alarm = 0;
              this.lightStatus.work = 1;
            } else if (datum.StatusCode === 2) {
              this.lightStatus.alarm = 1;
              this.lightStatus.work = 0;
            }
          }
        }
      });
    },
    // 查询机床工作模式
    searchMachineStatus_WorkMode() {
      var param = [];
      param[0] = ["opName", this.station];
      var Data = this.CreateData(
        "11",
        "LG_临工看板_设备管理_查询当前状态_工作模式",
        param
      );
      this.ExecDatabase(Data).then((res) => {
        if (res.data.length > 0) {
          const datum = res.data[0];
          this.lightStatus.shutdown = datum.shutdown;
          this.lightStatus.emergency = datum.emergency;
          this.lightStatus.auto = datum.auto;
          this.lightStatus.manual = datum.manual;
        } else {
          this.lightStatus.shutdown = 0;
          this.lightStatus.emergency = 0;
          this.lightStatus.auto = 0;
          this.lightStatus.manual = 0;
        }
      });
    },
    searchTablePartId() {
      var param = [];
      param[0] = ["stationNumber", this.stationId];
      var Data1 = this.CreateData(
        "3",
        "select top 1 * from [dbo].[LG_工位扫描信息视图] where opName = " +
          `'OP70'` +
          "AND [type] = 1 order by scanTime desc",
        param
      );
      this.ExecDatabase(Data1).then((response) => {
        this.ProductNumber = response.data[0].partId;
      });
    },
    searchCurrentTool(toolNum) {
      var param = [];
      param[0] = ["所在工位号", this.station];
      param[1] = ["刀具号", toolNum];
      var Data1 = this.CreateData(
        "11",
        "LG_临工看板_刀具管理_当前刀具信息查询",
        param
      );
      this.ExecDatabase(Data1).then((response) => {
        if (response.data.length > 0) {
          this.machineInfo_tool.thresholdValue1 = response.data[0].预警值1;
          this.machineInfo_tool.thresholdValue2 = response.data[0].预警值2;
          this.machineInfo_tool.toolLife = response.data[0].刀具额定寿命;
          this.machineInfo_tool.toolNum = response.data[0].刀具代码;
          this.machineInfo_tool.toolCount = response.data[0].已用寿命;
          this.machineInfo_tool.surplus =
            Math.floor(
              (1 -
                this.machineInfo_tool.toolCount /
                  this.machineInfo_tool.toolLife) *
                100 *
                100
            ) / 100;
        }
      });
    },
    toolInfoColor() {
      const info = this.machineInfo_tool;
      const toolLife = info.toolLife;
      if (parseInt(toolLife) === 0) {
        this.processColor = "#16c1a0";
      } else {
        const toolCount = info.toolCount;
        const thresholdValue1 = info.thresholdValue1;
        const thresholdValue2 = info.thresholdValue2;
        const used = (toolCount / toolLife) * 100;
        console.log(used);
        if (used <= thresholdValue1) {
          this.processColor = "#16c1a0";
        }
        if (used > thresholdValue1 && used <= thresholdValue2) {
          this.processColor = "#efa52e";
        }
        if (used > thresholdValue2) {
          this.processColor = "#a30015";
        }
      }
    },
    showPage(type) {
      this.title = "";
      this.flag = true;
      this.dialogVisible = true;
      this.pageType = type;
      switch (type) {
        case 1:
          this.title = "设备管理";
          break;
        case 2:
          this.title = "计划管理";
          break;
        case 3:
          this.title = "产品管理";
          break;
        case 4:
          this.title = "质量管理";
          break;
        case 5:
          this.title = "刀具管理";
          break;
        case 6:
          this.title = "Andon管理";
          break;
        case 7:
          this.title = "工艺管理";
          break;
        case 8:
          this.title = "能源管理";
          break;
        case 9:
          this.title = "基础参数管理";
          break;
        default:
          break;
      }
    },
    // OEE图形
    drawLine501() {
      const myChart6395AArrr1 = this.$echarts.init(
        document.getElementById("myChart6395AArrr1")
      );
      myChart6395AArrr1.setOption({
        tooltip: {
          formatter: "{a} <br/>{c} {b}",
        },
        series: [
          {
            name: "进给倍率",
            type: "gauge",
            min: 0,
            max: 150,
            startAngle: 200,
            endAngle: -20,
            splitNumber: 6,
            radius: "100%",
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [0.2, "#ff4500"],
                  [0.8, "#27d500"],
                  [1, "#ff4500"],
                ],
                width: 3,
              },
            },
            axisLabel: {
              // 坐标轴小标记
              textStyle: {
                // 属性lineStyle控制线条样式
                fontWeight: "bolder",
                color: "#fff",
                shadowColor: "#fff", // 默认透明
                shadowBlur: 1,
              },
            },
            axisTick: {
              // 坐标轴小标记
              length: 5, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto",
                shadowColor: "#fff", // 默认透���
                shadowBlur: 1,
              },
            },
            splitLine: {
              // 分隔线
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 1,
                color: "#fff",
                shadowColor: "#fff", // 默认透明
                shadowBlur: 1,
              },
            },
            title: {
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: "bolder",
                fontSize: 14,
                color: "#fff",
                shadowColor: "#fff", // 默认透明
                shadowBlur: 5,
              },
              offsetCenter: [0, "40%"],
            },
            detail: {
              formatter: this.machineInfo_work.feedRate + "%",
              shadowBlur: 3,
              offsetCenter: [0, "70%"], // x, y，单位px
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: "bolder",
                color: "#fff",
                fontSize: 16,
              },
            },
            data: [{ name: "进给倍率", value: this.machineInfo_work.feedRate }],
          },
        ],
      });
      const myChart6395dadadsAArrr1 = this.$echarts.init(
        document.getElementById("myChart6395dadadsAArrr1")
      );
      myChart6395dadadsAArrr1.setOption({
        tooltip: {
          formatter: "{a} <br/>{c} {b}%",
        },
        series: [
          {
            name: "主轴倍率",
            type: "gauge",
            min: 0,
            max: 150,
            startAngle: 200,
            endAngle: -20,
            splitNumber: 6,
            radius: "100%",
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [0.2, "#ff4500"],
                  [0.8, "#27d500"],
                  [1, "#ff4500"],
                ],
                width: 3,
              },
            },
            axisLabel: {
              // 坐标轴小标记
              textStyle: {
                // 属性lineStyle控制线条样式
                fontWeight: "bolder",
                color: "#fff",
                shadowColor: "#fff", // 默认透明
                shadowBlur: 1,
              },
            },
            axisTick: {
              // 坐标轴小标记
              length: 5, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto",
                shadowColor: "#fff", // 默认透���
                shadowBlur: 1,
              },
            },
            splitLine: {
              // 分隔线
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 1,
                color: "#fff",
                shadowColor: "#fff", // 默认透明
                shadowBlur: 1,
              },
            },
            title: {
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: "bolder",
                fontSize: 14,
                color: "#fff",
                shadowColor: "#fff", // 默认透明
                shadowBlur: 5,
              },
              offsetCenter: [0, "40%"],
            },
            detail: {
              formatter: this.machineInfo_work.spindleSpeed + "%",
              shadowBlur: 3,
              offsetCenter: [0, "70%"], // x, y，单位px
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: "bolder",
                color: "#fff",
                fontSize: 16,
              },
            },
            data: [
              { name: "主轴倍率", value: this.machineInfo_work.spindleSpeed },
            ],
          },
        ],
      });
    },
    // 获取Andon实时表
    searchTableAndon() {
      var param = [];
      param[0] = ["opname", this.station];
      var Data = this.CreateData(
        "11",
        "LG_临工看板_Andon管理_当前Andon",
        param
      );
      this.ExecDatabase(Data).then((response) => {
        if (response.data.length > 0) {
          for (const info of response.data) {
            this.solveAndonList(
              this.station,
              info.AndonName + "呼叫",
              info.TriggerTime
            );
          }
        }
      });
    },
    // 接收andon
    solveAndonList(opName, AndonName, TriggerTime) {
      const _this = this;
      this.notifyPromise = this.notifyPromise
        .then(this.$nextTick)
        .then(function () {
          _this.$notify({
            title: opName + "-" + AndonName,
            dangerouslyUseHTMLString: true,
            type: "warning",
            duration: 3000,
            position: "bottom-right",
            message: `
<div>
  <span style="font-size: 16px">内容：</span>
  <span style="font-size: 16px">${AndonName}</span>
</div>
<div>
  <span style="font-size: 16px">时间：</span>
  <span style="font-size: 16px">${TriggerTime}</span>
</div>
`,
          });
        });
    },
    // 接收报警 展示
    solveAlarm(opName, content, time) {
      this.$notify({
        title: opName + "-设备报警",
        dangerouslyUseHTMLString: true,
        type: "danger",
        duration: 3000,
        position: "bottom-right",
        message: `
<div>
  <span style="font-size: 16px">内容：</span>
  <span style="font-size: 16px">${content}</span>
</div>
<div>
  <span style="font-size: 16px">时间：</span>
  <span style="font-size: 16px">${time}</span>
</div>
`,
      });
    },
    // 查询基础参数 计划时间
    searchBasicParams() {
      this.planBeat = 0;
      var param = [];
      param[0] = ["opname", this.station];
      var Data = this.CreateData(
        "11",
        "LG_临工看板_设备管理_基础参数时间查询",
        param
      );
      this.ExecDatabase(Data).then((response) => {
        if (response.data.length !== 0) {
          this.planBeat = response.data[0].产品额定时间;
        }
      });
    },
    // 监听基础参数设定成功后 查询
    setBasicParamSuccess() {
      this.searchBasicParams();
    },
    closePage() {
      window.location.href = "about:blank";
      window.close();
    },
    getLogo() {
      axios
        .get("../../zhlogo.png", {
          responseType: "arraybuffer",
        })
        .then((res) => {
          this.titlePng =
            "data:image/jpeg;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            );
        });
      axios
        .get("../../MESlogo.png", {
          responseType: "arraybuffer",
        })
        .then((res) => {
          this.titlePng1 =
            "data:image/jpeg;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            );
        });
      axios
        .get("../../run.png", {
          responseType: "arraybuffer",
        })
        .then((res) => {
          this.titlePng2 =
            "data:image/jpeg;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            );
        });
    },
  },
};
</script>
<style>
HTML {
  overflow: auto;
}
body {
  margin: 0;
  padding: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  position: relative;
}
/*css主要部分的样式*/
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px; /*对垂直流动条有效*/
  height: 5px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #0e3261ff;
  /*background-color: #ffffff;*/
  border-radius: 2px;
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgb(10, 35, 82);
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
  display: none;
}

/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
  background: #dedede;
}
</style>
<style scoped>
.allShow {
  overflow-y: hidden;
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  color: white;
  font-family: "Microsoft YaHei", 微软雅黑, "PingFang SC", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  background-image: url("../../../public/背景.png");
}
.is-selected {
  color: #1989fa;
}
.first-station {
  width: 1920px;
  height: 1080px;
  background-color: rgb(8, 31, 72);
  color: white;
  background-size: 100%;
}
/*警示灯提示文字*/
.leftTips {
  float: right;
  font-size: 1.2rem;
  font-weight: bolder;
  margin-right: 30px;
  color: white;
  margin-top: -3px;
}
.rightTips {
  float: right;
  margin-right: 30px;
  font-size: 1.2rem;
  font-weight: bolder;
  color: white;
  margin-top: -3px;
}
/*警示灯*/
.lamp {
  width: 20px;
  height: 20px;
}
.data-box1 {
  color: white;
  position: absolute;
  -webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
  -moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
  box-shadow: inset 0 0 30px rgb(24, 78, 135);
}
.boxBorder {
  position: absolute;
  padding: 10px;
  border-style: solid;
  border-color: rgb(71, 209, 226);
}
.borderLeft1 {
  border-width: 2px 0 0 2px;
  top: -2px;
  left: -2px;
}
.borderLeft2 {
  border-width: 2px 2px 0 0;
  top: -2px;
  right: -2px;
}
.borderRight1 {
  border-width: 0 0 2px 2px;
  bottom: -2px;
  left: -2px;
}
.borderRight2 {
  border-width: 0 2px 2px 0;
  bottom: -2px;
  right: -2px;
}
.indicatorBlock {
  float: left;
  margin: 12px 0 0 30px;
  width: 15px;
  height: 26px;
  background-color: #016eea;
}
.indicatorText {
  margin: 16px 0 0 20px;
  float: left;
  font-size: 20px;
}
</style>
<style scoped lang="scss">
.show-label-title {
  cursor: pointer;
  border-radius: 5px;
  font-size: 28px;
  margin: 10px 5px;
  background-color: #ffad1b;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid #00893d;
}
::v-deep .yellowLight {
  background-color: yellow;
  width: 20px;
  height: 20px;
  border-radius: 15px;
  text-align: center;
  height: 20px;
  width: 20px;
  margin: 0px 0px 0px 10px;
}
::v-deep .greyLight {
  background-color: white;
  width: 20px;
  height: 20px;
  border-radius: 15px;
  text-align: center;
  height: 20px;
  width: 20px;
  margin: 0px 0px 0px 10px;
}
::v-deep .greenLight {
  background: green;
  width: 20px;
  height: 20px;
  border-radius: 15px;
  text-align: center;
  height: 20px;
  width: 20px;
  margin: 0px 0px 0px 10px;
}
::v-deep .redLight {
  background: red;
  width: 20px;
  height: 20px;
  border-radius: 15px;
  text-align: center;
  height: 20px;
  width: 20px;
  margin: 0px 0px 0px 10px;
}
::v-deep .el-divider--horizontal {
  margin: 5px 0;
}
::v-deep .el-dialog__title {
  font-size: 26px;
}
::v-deep .el-form-item__label {
  color: #000000;
}
.andonCallList {
  width: 200px;
  height: 80px;
  font-size: 20px;
  text-align: center;
  margin-left: 5px;
  line-height: 2;
  color: #fff;
}
.alarmInfo {
  font-size: 20px;
}
</style>

