<template>
  <div class="testdiv">
    <!-- 主体内容 -->
    <div class="divborder" style="margin: 0px">
      <div class="right-main allstate">
        <!-- 头部 -->
        <div class="machineTitle">
          <!-- 运行 -->
          <p class="ctg" data-id="1" @click="showStatus(1)">
            <span class="run"></span>
            <span>{{ runNum }}</span>
          </p>
          <!-- 调试 -->
          <p class="ctg" data-id="2" @click="showStatus(2)">
            <span class="debug"></span>
            <span>{{ debugNum }}</span>
          </p>
          <!-- 空闲 -->
          <p class="ctg" data-id="3" @click="showStatus(3)">
            <span class="free"></span>
            <span>{{ freeNum }}</span>
          </p>
          <!-- 报警 -->
          <p class="ctg" data-id="4" @click="showStatus(4)">
            <span class="error"></span>
            <span>{{ errorNum }}</span>
          </p>
          <!-- 关机 -->
          <p class="ctg" data-id="0" @click="showStatus(0)">
            <span class="close"></span>
            <span>{{ closeNum }}</span>
          </p>
        </div>
        <!-- 主体 -->
        <div class="machineState">
          <div
            v-for="(item, i) in mList"
            :class="`serialnumber status_${item.staus}`"
            :key="i"
            v-if="listAll[item.machineId]"
            @click="getDetail(i)"
          >
            <p>
              <b>{{ item.title }}</b>
            </p>
            <p>{{ item.machineTitle }}</p>
            <p>
              <span :class="`status ${sList[item.staus]}`"></span>
              <span>{{ $t(400000) + "：" + $t(`50004${item.staus}`) }}</span>
            </p>
            <p>
              <span :class="`status ${sList[item.staus]}`"></span>
              <span>{{
                $t("600009") +
                "：" +
                (!item.pn ? "NA" : item.pn.substring(item.pn.lastIndexOf("/")))
              }}</span>
            </p>
            <div v-if="!item.staus">
              <p>
                <span :class="`status ${sList[item.staus]}`"></span>
                <span>{{ $t(500047) + "：NA" }}</span>
              </p>
              <p>
                <span :class="`status ${sList[item.staus]}`"></span>
                <span>{{ $t(500055) + "：NA" }}</span>
              </p>
              <p>
                <span :class="`status ${sList[item.staus]}`"></span>
                <span>{{ $t(500049) + "：NA" }}</span>
              </p>
            </div>
            <div v-else>
              <p>
                <span :class="`status ${sList[item.staus]}`"></span>
                <span>
                  {{
                    $t(500047) + "：" + item.spindleSpeed1 + "&nbsp;&nbsp;RPM"
                  }}
                </span>
              </p>
              <p>
                <span :class="`status ${sList[item.staus]}`"></span>
                <span>{{ $t(500055) + "：" + item.spindleRatio + "%" }}</span>
              </p>
              <p>
                <span :class="`status ${sList[item.staus]}`"></span>
                <span>{{ $t(500049) + "：" + item.feedRatio + "%" }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 详情弹框 -->
    <Modal class="newModalClass" v-model="detailinfo" :width="1070">
      <div class="modal_body mStateDetail">
        <h4 class="title">{{ macheinetitle }}</h4>
        <div>
          <div class="info">
            {{ $t("950011") }}：
            <span class="productname">{{ productname }} </span>
          </div>
          <div class="info">
            {{ $t("900967") }}：
            <span class="routename">{{ routename }}</span>
          </div>
          <div class="info">
            {{ $t("950012") }}：
            <span class="output">{{ output }}</span>
          </div>
          <div class="info">
            {{ $t("500127") }}：
            <span class="timepareto">{{ timepareto }}</span>
          </div>
        </div>
        <hr />
        <div class="divmiddle">
          <div class="divtable">
            <h4>{{ $t("901035") }}</h4>
            <Table highlight-row :data="tableData1" :columns="tableColumns1">
            </Table>
          </div>
          <div class="divtable">
            <h4>{{ $t("950013") }}</h4>
            <Table highlight-row :data="tableData2" :columns="tableColumns2">
            </Table>
          </div>
          <div class="divtable">
            <h4>{{ $t("901022") }}</h4>
            <Table
              highlight-row
              :show-header="false"
              :data="tableData3"
              :columns="tableColumns3"
            >
            </Table>
          </div>
        </div>
        <div class="echartinfo">
          <div class="slice-map" ref="slicemap"></div>
        </div>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" @click="closeModal()">
          {{ $t("1028") }}
        </Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import moment from "moment";
import echarts from "echarts";
import axios from "@/libs/api.request";
import { clearInterval, setInterval } from "timers";

export default {
  inject: ["reload"],
  data() {
    return {
      // 各状态运行数量
      runNum: "",
      debugNum: "",
      freeNum: "",
      errorNum: "",
      closeNum: "",
      // 状态列表
      sList: ["close", "run", "debug", "free", "error"],
      // 定时器
      timer: null,
      // 设备列表
      mList: [],

      machineState: "",

      idArr: [],

      tmp_i: -1,

      echo_echart: null,

      echo_startTime: 0,
      echo_endTime: 0,

      listAll: [],

      detailinfo: false,

      macheinetitle: "",
      productname: "NA",
      routename: "NA",
      output: "NA",
      timepareto: "NA",
      tableData1: [],
      tableColumns1: [
        {
          title: this.$t("600009"),
          key: "program_no",
          width: "120px",
        },
        {
          title: this.$t("100088"),
          key: "product_name",
          width: "120px",
        },
        {
          title: this.$t("920067"),
          key: "yield",
          width: "120px",
        },
      ],
      tableData2: [],
      tableColumns2: [
        {
          title: this.$t("950014"),
          key: "status",
          width: "120px",
        },
        {
          title: this.$t("950015"),
          key: "time",
          width: "120px",
        },
        {
          title: this.$t("950016"),
          key: "percent",
          width: "120px",
        },
      ],
      tableColumns3: [
        {
          title: "",
          key: "statusname",
          width: "120px",
        },
        {
          title: "",
          key: "statusnum",
          width: "120px",
        },
      ],
      tableData3: [
        {
          statusname: this.$t("400008"),
          statusnum: "NA",
          cellClassName: {
            statusname: "demo-table-info-column",
          },
        },
        {
          statusname: this.$t("950017"),
          statusnum: "NA",
          cellClassName: {
            statusname: "demo-table-info-column",
          },
        },
        {
          statusname: this.$t("950018"),
          statusnum: "0",
          cellClassName: {
            statusname: "demo-table-info-column",
          },
        },
        {
          statusname: this.$t("500049"),
          statusnum: "NA",
          cellClassName: {
            statusname: "demo-table-info-column",
          },
        },
        {
          statusname: this.$t("500048"),
          statusnum: "NA",
          cellClassName: {
            statusname: "demo-table-info-column",
          },
        },
        {
          statusname: this.$t("500070"),
          statusnum: "NA",
          cellClassName: {
            statusname: "demo-table-info-column",
          },
        },
      ],
    };
  },
  mounted() {
    if (this.timer) {
      clearInterval(this.timer);
    } else {
      this.getList();
      this.timer = setInterval(() => {
        this.getList();
      }, 30000);
    }
  },
  methods: {
    // 获取设备状态数据
    getList() {
      const _this = this;
      let { $t } = this;
      axios
        .request({
          url: "/cnc/machine/getMachineCode4",
          method: "post",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.last_data;
            if (data !== null && data.ret === 1 && data.data.length) {
              let ctg1 = 0;
              let ctg2 = 0;
              let ctg3 = 0;
              let ctg4 = 0;
              let ctg0 = 0;
              let dataArr = [];
              this.listAll = res.data.listAll;
              data.data.forEach((ele, i) => {
                if (result.listAll[ele.machineId]) {
                  switch (ele.staus) {
                    case 0:
                      ctg0++;
                      break;
                    case 1:
                      ctg1++;
                      break;
                    case 2:
                      ctg2++;
                      break;
                    case 3:
                      ctg3++;
                      break;
                    case 4:
                      ctg4++;
                      break;
                  }
                }
                if (_this.tmp_i == -1) {
                  if (result.listAll[ele.machineId]) {
                    dataArr.push(ele);
                  }
                } else {
                  if (
                    _this.tmp_i == ele.staus &&
                    result.listAll[ele.machineId]
                  ) {
                    dataArr.push(ele);
                  }
                }
              });

              this.runNum = $t(500041) + "：" + ctg1 + $t(500050);
              this.debugNum = $t(500042) + "：" + ctg2 + $t(500050);
              this.freeNum = $t(500043) + "：" + ctg3 + $t(500050);
              this.errorNum = $t(900597) + "：" + ctg4 + $t(500050);
              this.closeNum = $t(500040) + "：" + ctg0 + $t(500050);
              this.mList = dataArr;
            }
          } else {
            _this.$Message.error($t(9000271));
          }
        });
    },

    showStatus(status) {
      let index = this.idArr.indexOf(status);
      if (index > -1) {
        // 第二次点击
        this.idArr = [];
        this.tmp_i = -1;
      } else {
        // 第一次点击
        this.idArr = [];
        this.idArr.push(status);
        this.tmp_i = status;
      }
      this.machineState = "";
      this.getList();
    },

    getDetail(index) {
      this.detailinfo = true;
      var info = this.mList[index];
      // 标题
      this.macheinetitle =
        info.title + "-" + info.machineTitle + " " + this.$t("5500095");
      // 获取产品详情
      this.getProductDetails(info.machineId);
      // 设备状态监控
      this.tableData3 = [
        {
          statusname: this.$t("400008"),
          statusnum: "NA",
          cellClassName: {
            statusname: "demo-table-info-column",
          },
        },
        {
          statusname: this.$t("950017"),
          statusnum: "NA",
          cellClassName: {
            statusname: "demo-table-info-column",
          },
        },
        {
          statusname: this.$t("950018"),
          statusnum: "0",
          cellClassName: {
            statusname: "demo-table-info-column",
          },
        },
        {
          statusname: this.$t("500049"),
          statusnum: "NA",
          cellClassName: {
            statusname: "demo-table-info-column",
          },
        },
        {
          statusname: this.$t("500048"),
          statusnum: "NA",
          cellClassName: {
            statusname: "demo-table-info-column",
          },
        },
        {
          statusname: this.$t("500070"),
          statusnum: "NA",
          cellClassName: {
            statusname: "demo-table-info-column",
          },
        },
      ];
      this.tableData3[0].statusnum = this.inistate(info.staus); // 状态
      this.tableData3[2].statusnum = info.spindleSpeed1; // 转速
      this.tableData3[3].statusnum =
        info.feedRatio == "0" ? "NA" : info.feedRatio + "%"; // 进给倍率
      this.tableData3[4].statusnum =
        info.spindleRatio == "0" ? "NA" : info.spindleRatio + "%"; // 转速倍率

      // 获取切片数据
      this.getReadyData(info.section_id);
    },
    getReadyData(section_id) {
      let dt = new Date();
      var date = this.$time.getDate(0, 1);
      var timeSection =
        date +
        " 00:00:00 - " +
        date +
        " " +
        dt.getHours() +
        ":" +
        dt.getMinutes() +
        ":00";
      let params = {
        sectionId: section_id,
        timeSection: timeSection,
      };
      axios
        .request({
          url: "/cnc/ProjectSectionMachine/MachineCanvasPrograms",
          params,
          method: "get",
        })
        .then((res) => {
          if (res.data.canvas && res.data.canvas.length) {
            let startTime = res.data.startTime;
            let endTime = res.data.endTime;
            console.log(new Date(startTime).getTime() / 1000);
            console.log(new Date(endTime).getTime() / 1000);
            this.echo_startTime = new Date(startTime).getTime() / 1000;
            this.echo_endTime = new Date(endTime).getTime() / 1000;
            // 新切片
            this.GetCanvasData(res.data.canvas, res.data.pareto);
          } else {
            if (this.echo_echart) {
              this.echo_echart.clear();
            }
          }
        });
    },
    GetCanvasData(canvasData, paretoData) {
      // 获取状态占比
      let statusData = [];
      paretoData.forEach((ele) => {
        var paretoAllData = ele.listShutdownHoldTime;
        var paretoSpan = ele.total;
        let beforePer = 0;
        let totalSubmit = 0;
        let lineData = [];
        let totaltime = 0; // 除了关机时间，其他时间之和
        paretoAllData.forEach((ele) => {
          totalSubmit += ele.timeSpan;
          if (ele.factor === "shutdown") {
          } else {
            totaltime += ele.timeSpan;
          }
        });

        // 数据都是0时
        if (totalSubmit === 0) {
          totalSubmit = parseInt(paretoSpan);
          var tmp_paretoAllData = paretoAllData;
          tmp_paretoAllData[0].timeSpan = parseInt(paretoSpan);
          tmp_paretoAllData.forEach((ele) => {
            beforePer = ele.timeSpan / totalSubmit;
            lineData.push(
              this.$datatype.formatDecimal(beforePer * 100, 1, 2, false) + "%"
            );
          });
        } else {
          // 数据不是0时，关机时间等于总时间减去其他四个状态时间之和
          // 给关机时间重新赋值
          let data_paretoAllData = paretoAllData;
          let numtime = paretoSpan - totaltime;
          if (numtime < 0) {
            numtime = 0;
          }
          // 重新赋值，关机
          data_paretoAllData.forEach((ele) => {
            if (ele.factor === "shutdown") {
              ele.timeSpan = numtime;
            }
          });
          data_paretoAllData.forEach((ele) => {
            // 关机时间除以时间段
            if (ele.factor === "shutdown") {
              beforePer = numtime / paretoSpan;
              lineData.push(
                this.$datatype.formatDecimal(beforePer * 100, 1, 2, false) + "%"
              );
            } else {
              beforePer = ele.timeSpan / paretoSpan;
              lineData.push(
                this.$datatype.formatDecimal(beforePer * 100, 1, 2, false) + "%"
              );
            }
          });
        }
        statusData.push(lineData);
      });
      this.createcanvas(canvasData, statusData);
      // $(".slice-map").show();
      // $(".loading-div").hide();
    },
    createcanvas(canvasData, statusData) {
      canvasData.forEach((canvasDataVal, canvasDataKey) => {
        // 在没有数据，只有一条数据时，用来调整切片图的样式，人为填充2-3条数据。
        let temp_v = 1;
        /**********************/
        // 处理程序号数据
        var programNos = [];
        var programNoss;
        var programNosValue;
        if (
          canvasDataVal.programNos != null &&
          canvasDataVal.programNos.length > 0
        ) {
          canvasDataVal.programNos.forEach((ele) => {
            programNoss = {};
            programNosValue = [];
            var start = this.$time.datestrtotime(ele.startTime);
            var end = this.$time.datestrtotime(ele.endTime);
            programNosValue.push(start);
            programNosValue.push(end);
            programNosValue.push(ele.machineId);
            programNosValue.push(ele.programNo);
            programNosValue.push(ele.yield);
            programNoss.isprogram = ele.isprogram;
            programNoss.color = ele.color;
            programNoss.value = programNosValue;
            programNos.push(programNoss);
          });
        }

        var list = [];
        /**********************/
        if (
          canvasDataVal.list_msh !== null &&
          canvasDataVal.list_msh.length < 1
        ) {
          var start_time = Date.parse(canvasDataVal.t_start_time);
          var end_time = Date.parse(canvasDataVal.t_end_time);
          list = [
            [start_time, end_time + temp_v, 0],
            [end_time - temp_v, end_time, 0],
          ];
        } else if (
          canvasDataVal.list_msh !== null &&
          canvasDataVal.list_msh.length === 1
        ) {
          canvasDataVal.list_msh.forEach((canvasDataVal_v) => {
            list = [
              [
                canvasDataVal_v.start_time,
                canvasDataVal_v.start_time + temp_v,
                canvasDataVal_v.machine_status,
                canvasDataVal.machineID,
                canvasDataVal_v.isException,
                canvasDataVal_v.workMode,
                canvasDataVal_v.workModeId,
                encodeURI(canvasDataVal_v.remark),
                canvasDataVal_v.userId,
                canvasDataVal_v.isFake,
                canvasDataVal_v.workModeParentId,
                canvasDataVal_v.workModeParent,
              ],
              [
                canvasDataVal_v.start_time + temp_v,
                canvasDataVal_v.end_time - temp_v,
                canvasDataVal_v.machine_status,
                canvasDataVal.machineID,
                canvasDataVal_v.isException,
                canvasDataVal_v.workMode,
                canvasDataVal_v.workModeId,
                encodeURI(canvasDataVal_v.remark),
                canvasDataVal_v.userId,
                canvasDataVal_v.isFake,
                canvasDataVal_v.workModeParentId,
                canvasDataVal_v.workModeParent,
              ],
              [
                canvasDataVal_v.end_time - temp_v,
                canvasDataVal_v.end_time,
                canvasDataVal_v.machine_status,
                canvasDataVal.machineID,
                canvasDataVal_v.isException,
                canvasDataVal_v.workMode,
                canvasDataVal_v.workModeId,
                encodeURI(canvasDataVal_v.remark),
                canvasDataVal_v.userId,
                canvasDataVal_v.isFake,
                canvasDataVal_v.workModeParentId,
                canvasDataVal_v.workModeParent,
              ],
            ];
          });
        } else if (
          canvasDataVal.list_msh !== null &&
          canvasDataVal.list_msh.length > 1
        ) {
          canvasDataVal.list_msh.forEach((canvasDataVal_v) => {
            var data = [];
            data.push(canvasDataVal_v.start_time);
            data.push(canvasDataVal_v.end_time);
            data.push(canvasDataVal_v.machine_status);
            data.push(canvasDataVal.machineID);
            data.push(canvasDataVal_v.isException);
            data.push(canvasDataVal_v.workMode);
            data.push(canvasDataVal_v.workModeId);
            data.push(encodeURI(canvasDataVal_v.remark));
            data.push(canvasDataVal_v.userId);
            data.push(canvasDataVal_v.isFake);
            data.push(canvasDataVal_v.workModeParentId);
            data.push(canvasDataVal_v.workModeParent);
            data.push(canvasDataVal_v.userName);
            list.push(data);
          });
        }
        if (list !== null && list.length > 1) {
          var data = [];
          data.push(list[list.length - 1][1] + 1);
          data.push(list[list.length - 1][1] + 1);
          data.push(0);
          data.push(0);
          data.push(0);
          data.push(0);
          data.push(0);
          data.push(0);
          data.push(0);
          data.push(0);
          data.push(0);
          data.push("");
          list.push(data);

          // 第一条加入空数据，处理空白条问题
          var arr = [];
          list.unshift(arr);
        }

        // document.getElementById('new_'+canvasDataKey).innerHTML = ''
        // 画图
        this.newGetCanvasDrawing(
          list,
          canvasDataKey,
          canvasDataVal.machineTitle,
          statusData[canvasDataKey],
          programNos
        );
      });
    },
    newGetCanvasDrawing(
      data,
      canvasDataKey,
      machineTitle,
      machineStatus,
      data1
    ) {
      const _this = this;
      // var width = document.getElementsByClassName('echart-div-list').width

      var nameList = [
        this.$t("500040"),
        this.$t("500041"),
        this.$t("500042"),
        this.$t("500043"),
        this.$t("500044"),
        this.$t("500220"),
      ];
      var colorList = [
        "#22333b",
        "#5cb85c",
        "#3574ad",
        "#f0ad4e",
        "#d71518",
        "#FFFF33",
      ];
      data = echarts.util.map(data, function (item, index) {
        return {
          value: item,
          itemStyle: {
            normal: {
              color: colorList[item[2]],
            },
          },
        };
      });
      var option = {
        title: {
          text: machineTitle,
          left: "50",
          padding: [5, 0, 0, 0],
          textStyle: {
            fontSize: 18,
          },
          subtextStyle: {
            fontSize: 14,
          },
        },
        tooltip: {
          backgroundColor: "rgba(255,0,0,0)", // 通过设置rgba调节背景颜色与透明度
          formatter: (params) => {
            // 显示设备状态、程序号、产品名称、是否异常、工作模式
            var showHtm = "";
            var from = this.fmtDate(params.value[0]);
            var to = this.fmtDate(params.value[1]);
            var status = nameList[params.value[2]];
            if (
              params.data.isprogram !== undefined &&
              params.data.isprogram === 1
            ) {
              var programno = params.value[3];
              var yield1 = params.value[4];
              showHtm +=
                '<div style="background-color:gray;border-radius:5px;">' +
                this.$t("600009") +
                "：" +
                programno +
                "<br>" +
                this.$t("500108") +
                "：" +
                yield1 +
                "<br>" +
                "from： " +
                from +
                "<br>" +
                "to： " +
                to +
                "</div>";
              return showHtm;
            } else {
              var isException = params.value[4]; // 是否异常
              var workMode = params.value[5]; // 子级工作模式
              var workModeParent = params.value[11]; // 父级工作模式
              var backgroundColor =
                isException === 1 ? "rgba(255,0,0,0.7)" : "gray";
              var ExceptionStr =
                isException === 1 ? this.$t("1000020") : this.$t("1000021");
              showHtm +=
                '<div style="background-color:' +
                backgroundColor +
                ';border-radius:5px;">' +
                this.$t("400000") +
                ": " +
                status +
                "<br>" +
                this.$t("900858") +
                "：" +
                ExceptionStr +
                "<br>" +
                this.$t("950085") +
                "：" +
                workModeParent +
                "<br>" +
                this.$t("950049") +
                "：" +
                workMode +
                "<br>" +
                "from： " +
                from +
                "<br>" +
                "to： " +
                to +
                "</div>";
              return showHtm;
            }
          },
        },
        legend: {
          orient: "horizontal",
          padding: [30, 0, 0, 0], //
          data: nameList,
          formatter: (name) => {
            var index = 0;
            var clientlabels = nameList;
            // var clientcounts = [9, 1, 10, 45, 77];
            var clientcounts = machineStatus;
            clientlabels.forEach(function (value, i) {
              if (value === name) {
                index = i;
              }
            });
            return name + "  " + clientcounts[index];
          },
        },
        color: colorList,
        grid: {
          top: "28%",
          left: "5%",
          right: "5%",
          bottom: "67",
          containLable: true,
        },
        xAxis: {
          show: true,
          // scale: true,
          splitNumber: 6,
          axisLabel: {
            margin: 5,
            interval: 0,
            rotate: 0,
            showMaxLabel: true,
            formatter: (value) => {
              return this.fmtDate(value);
            },
          },
          splitLine: {
            show: true,
          },
          // min: "dataMin",
          // max: "dataMax",
          min: _this.echo_startTime,
          max: _this.echo_endTime,
        },

        yAxis: {
          show: false,
          max: 1,
          min: 0,
          splitNumber: 1,
        },
        series: [
          {
            type: "custom",
            renderItem: this.renderItem,
            dimensions: ["from", "to", "profit"],
            name: [this.$t("500040")],
            data: data,
          },
          {
            type: "custom",
            renderItem: this.renderItem,
            dimensions: ["from", "to", "profit"],
            name: [this.$t("500041")],
            data: data,
          },
          {
            type: "custom",
            renderItem: this.renderItem,
            dimensions: ["from", "to", "profit"],
            name: [this.$t("500042")],
            data: data,
          },
          {
            type: "custom",
            renderItem: this.renderItem,
            dimensions: ["from", "to", "profit"],
            name: [this.$t("500043")],
            data: data,
          },
          {
            type: "custom",
            renderItem: this.renderItem,
            dimensions: ["from", "to", "profit"],
            name: [this.$t("500044")],
            data: data,
          },
          {
            type: "custom",
            renderItem: this.renderItem2,
            dimensions: ["from", "to", "profit"],
            name: [this.$t("500041")],
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data.color;
                },
              },
            },
            data: data1,
          },
        ],
      };

      if (!this.echo_echart) {
        var html = "";
        html +=
          '<div id="new_' +
          canvasDataKey +
          '" style="width: 100%;border: #83baff 0px solid;height: 180px;"></div>';
        let dom = this.$refs.slicemap;
        dom.innerHTML = html;
        var div = document.getElementById("new_" + canvasDataKey);
        this.echo_echart = echarts.init(div);
      }

      if (typeof option == "object") {
        this.echo_echart.setOption(option);
      }
    },
    renderItem(params, api) {
      var yValue = 1;
      var start = api.coord([api.value(0), yValue]);
      var size = api.size([api.value(1) - api.value(0), yValue]);
      var style = api.style();
      return {
        type: "rect",
        shape: {
          x: start[0],
          y: start[1],
          width: size[0],
          height: 50,
        },
        style: style,
      };
    },
    renderItem2(params, api) {
      var yValue = 1;
      var start = api.coord([api.value(0), yValue]);
      var size = api.size([api.value(1) - api.value(0), yValue]);
      var style = api.style();
      return {
        type: "rect",
        shape: {
          x: start[0],
          y: start[1] + 54,
          width: size[0],
          height: 7,
        },
        style: style,
      };
    },
    fmtDate(UNIX_timestamp) {
      var a = new Date(UNIX_timestamp * 1000);
      var months = [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
      ];
      var month = months[a.getMonth()];
      var date = (a.getDate() < 10 ? "0" + a.getDate() : a.getDate()) + " ";
      var hour = (a.getHours() < 10 ? "0" + a.getHours() : a.getHours()) + ":";
      var min =
        (a.getMinutes() < 10 ? "0" + a.getMinutes() : a.getMinutes()) + ":";
      var sec = a.getSeconds() < 10 ? "0" + a.getSeconds() : a.getSeconds();
      var time = month + "/" + date + hour + min + sec;
      return time;
    },

    getProductDetails(machineid) {
      this.tableData1 = [];
      this.tableData2 = [];
      this.productname = "NA";
      this.routename = "NA";
      this.output = "NA";
      this.timepareto = "NA";
      axios
        .request({
          url: "/cnc/Machine/GetMachineTodayDetail?machineId=" + machineid,
          method: "get",
        })
        .then((res) => {
          if (res.data.ret == 1) {
            var info = res.data.data;
            this.productname = info.product_name;
            this.routename = info.route_name;
            this.output = info.today_yield;
            this.timepareto = info.privitity + "%";

            // 设备产出统计
            if (info.outputs.length) {
              info.outputs.forEach((item, index) => {
                this.tableData1.push({
                  program_no: item.program_no,
                  product_name: item.product_name,
                  yield: item.yield,
                });
              });
            }
            // 设备状态分布
            if (info.machinestatus.length) {
              info.machinestatus.forEach((item, index) => {
                this.tableData2.push({
                  status: this.inistate(item.status),
                  time: item.time,
                  percent: item.percent,
                });
              });
            }
            // 设备状态监控
            this.tableData3[1].statusnum = info.status_range; // 持续时间
            this.tableData3[5].statusnum = info.alarm_code; // 报警代码
          }
        });
    },
    inistate(state) {
      var name = "";
      if (state === 0) {
        name = this.$t("500040");
      } else if (state === 1) {
        name = this.$t("500041");
      } else if (state === 2) {
        name = this.$t("500042");
      } else if (state === 3) {
        name = this.$t("500043");
      } else if (state === 4) {
        name = this.$t("500044");
      }
      return name;
    },
    closeModal() {
      this.detailinfo = false;
      if (this.echo_echart) {
        this.echo_echart.clear();
      }
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.echo_echart) {
      this.echo_echart.dispose();
      this.echo_echart = null;
    }
  },
};
</script>
<style lang="less">
.ctg {
  cursor: pointer;
}
.allstate {
  .machineTitle p {
    display: inline-block;
    margin: 13px;
  }
  .machineTitle p span:first-child {
    padding: 15px 25px;
  }
  .machineTitle p span:last-child {
    width: 100px;
    height: 20px;
    background: #e0e0e0;
    padding: 15px 10px;
  }
  .right-main {
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: #ddd;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  }
  .status_0 {
    border: 2px solid #22333b;
  }
  .status_1 {
    border: 2px solid #5cb85c;
  }
  .status_2 {
    border: 2px solid #3574ad;
  }
  .status_3 {
    border: 2px solid #f0ad4e;
  }
  .status_4 {
    border: 2px solid #d71518;
  }
  .status {
    position: absolute;
    display: inline-block;
    border-radius: 50%;
    height: 18px;
    width: 18px;
    left: 10px;
  }
  .close {
    background: #22333b;
  }
  .run {
    background: #5cb85c;
  }
  .debug {
    background: #3574ad;
  }
  .free {
    background: #f0ad4e;
  }
  .error {
    background: #d71518;
  }
  .serialnumber p {
    margin: 5px 0;
    padding: 5px 0;
  }
  .menu {
    width: 100%;
    background-color: #f7f7f7;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .machineState {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .menu {
    width: 100%;
    background-color: #f7f7f7;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .menu a {
    display: inline-block;
    padding: 10px 15px;
    font-size: 14px;
  }
  td,
  th {
    text-align: center;
  }
  .menu a.present {
    border-bottom: 2px solid #03a3df;
    color: #03a3df;
  }
  .label-primary {
    padding: 0px 20px;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    text-align: center;
  }
  .labels {
    margin-top: 40px;
  }
  .gamma {
    width: 100%;
    overflow-x: auto;
    margin-top: 50px;
    display: flex;
  }
  .gamma h3 {
    font-size: 16px;
    min-width: 100px;
  }
  .gama_gama {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
  }
  .colspan {
    /*width: 15%;*/
    width: 132px;
    margin-top: 20px;
    margin-right: 2%;
  }
  .rowspan {
    width: 100%;
  }
  .rowspan p.title-p {
    width: 100%;
    height: 40px;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 40px;
  }
  .rowspan p.status-p {
    width: 100%;
    height: 42px;
    text-align: center;
    line-height: 42px;
  }
  .serialnumber {
    width: 15%;
    margin: 2%;
    text-align: center;
    position: relative; 
    width: 20%; 
    cursor: pointer
    // border: 2px solid #ddd;
  }
  .serialnumber p {
    margin: 10px 0;
    padding: 5px 0;
  }
  .serialnumber p img {
    margin-right: 5px;
    vertical-align: middle;
  }
  .screen input.laydate-icon {
    width: 150px;
    height: 24px;
    font-size: 14px;
    padding-left: 30px;
    // background: url(../images/time.png) 10px center no-repeat;
  }
  .parameter-call {
    border: 1px solid #ddd;
    padding: 20px 0;
    margin: 10px 20px;
    height: 300px;
  }
  .echarts-efficiency {
    border: 1px solid #ddd;
    margin-top: 15px;
    padding: 15px;
  }
  .progress-bars h3 {
    font-size: 18px;
    font-weight: 500;
  }
  .progress2 {
    width: 50%;
    margin-top: 20px;
    margin-left: 30px;
  }
  .progress2 {
    display: flex;
  }
  .echarts-efficiency h3 {
    font-size: 18px;
    font-weight: 500;
  }
  .echarts-efficiency h3:not(:first-child) {
    margin-top: 20px;
  }
  .handle {
    margin-top: 50px;
  }
  .handle span {
    cursor: pointer;
  }
  .time-table {
    width: 96%;
    margin-left: 2%;
  }
  .time-table {
    border: 1px solid #dedede;
  }
  .time-table table tr th {
    padding: 8px 0;
    text-align: center;
    border: 1px solid #dedede;
    font-weight: 500;
  }
  .time-table table tr td {
    padding: 8px 0;
    text-align: center;
    border: 1px solid #dedede;
  }
  .slice-map {
    /*height: 100px;*/
  }
  .fault-list {
    width: 100%;
  }
  .staff-yield {
    display: flex;
  }
  .staff-yield div {
    width: 30%;
    margin-right: 3%;
    height: 250px;
  }
  .output-statistics {
    border: 1px solid #ddd;
    padding: 20px;
  }
  .three-level {
    width: 100%;
    display: flex;
  }
  .three-level div {
    flex: 1;
    padding: 20px;
    height: 400px;
  }
  .fault-list table thead tr th {
    /*background-color: #ffff01;*/
    /*font-weight: 500;*/
  }
  /*custom*/
  .percent-list {
    display: flex;
    margin-top: 10px;
    height: 20px;
    line-height: 20px;
  }
  .per-title {
    padding: 0 5px;
  }
  .per-color-cent {
    flex: 1;
    display: flex;
    margin-left: 20px;
  }
  .per-10 {
    position: relative;
    border: 1px solid #ddd;
    width: 80%;
    border-radius: 5px;
  }
  .per-num-ajax {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    text-align: center;
    /*background-color: #5cb85c;*/
    border-radius: 5px;
  }
  .per-num-ajax > span {
    color: #0362fd;
  }
}
.mStateDetail {
  .ivu-table td.demo-table-info-column {
    background-color: #2b85e4 !important;
    color: #fff;
  }
  .title {
    font-size: 14px;
    text-align: center;
    margin: -10px 0 10px;
  }
  .info {
    display: inline-block;
    width: 25%;
    span {
      color: #0000ff;
    }
  }
  hr {
    margin-right: 40px;
  }
  .divmiddle {
    display: inline-block;
    .divtable {
      width: 362px;
      float: left;
      margin-right: 10px;
    }
    .divtable:last-child {
      width: 242px;
      float: left;
    }
  }
  .echartinfo {
    .slice-map {
      height: 200px;
      border: 1px solid #ddd;
      margin: 10px 40px 10px 0px;
      padding: 30px;
    }
  }
}
</style>
