everlight.eap/front/dashboard/js/macstatus-detail.js

var prefix = server + "/eap/api/";

var types = [
  { name: "RUN", desc: "运行", color: "rgb(61, 149, 73)" },
  { name: "DISCONN", desc: "未连接", color: "rgb(178, 178, 178)" },
  { name: "REPAIR", desc: "维修", color: "rgb(178, 0, 89)" },
  { name: "PM", desc: "保养", color: "rgb(178, 98, 0)" },
  { name: "ERROR", desc: "错误", color: "rgb(178, 30, 30)" },
  { name: "IDLE", desc: "空闲", color: "rgba(178, 178, 0, 1)" },
  { name: "CHANGE", desc: "改机", color: "rgb(7, 87, 126)" },
];

var chartLoading = {
  text: "正在加载...",
  color: "#B21E1E",
  textColor: "#B21E1E",
};

var macCode = getQueryStringByName("macCode");
var time = getQueryStringByName("date");
var shift = "";
var alarmBarChart;
var timeOut = null;
$(function () {
  if (!macCode) {
    alert("请传入正确的设备号");
    return;
  }

  alarmBarChart = echarts.init(document.getElementById("alarmBar"));
  initPage({
    macCode: macCode,
    time: time || dateFormat("yyyy-MM-dd HH:mm:ss", new Date()),
    shift: shift,
  });

  alarmBarChart.on("click", function (params) {
    layer.open({
      type: 2,
      title: `机台【${macCode} ${params.name} ${params.seriesName}】报警明细`,
      shadeClose: true,
      shade: false,
      maxmin: true, //开启最大化最小化按钮
      area: ["993px", "600px"],
      content: `./mac-alarm-detail.html?fcode=${macCode}&date=${
        params.name
      }&shift=${escape(params.seriesName)}`,
    });
  });
});

function showLoading() {
  layer.load();
}
var intervalOne = "";
var intervalTwo = "";

function getMacCode() {
  return {
    date: dateFormat("yyyy-MM-dd", new Date(time)),
    macCode: macCode,
  };
}

function showLoading() {
  hideNav($(".rightNav"), $(".bgDiv"));
  layer.load();
}

// 检查机台号是否存在
function checkMchineIfExist(macCode) {
  return axios.get(`${server}/eap/api/machine/getbycode?code=${macCode}`);
}

// 初始化页面
function initPage(obj) {
  macCode = obj.macCode;
  time = new Date(obj.time);
  shift = obj.shift;
  checkMchineIfExist(obj.macCode).then((res) => {
    // console.log(res);
    if (res && res.data) {
      var startTime = dateFormat(
        "yyyy-MM-dd HH:mm:ss",
        new Date(getStartTime(obj.time, shift))
      );
      var dateStart = new Date(startTime);
      var et = new Date(startTime);
      var endTime = "";
      var isBetween = isBetweenZeroAndShiftStart(et);
      if (
        dateFormat("yyyy-MM-dd", et) === dateFormat("yyyy-MM-dd", new Date()) ||
        isBetween
      ) {
        endTime = dateFormat("yyyy-MM-dd HH:mm:ss", new Date());
      } else {
        endTime = dateFormat(
          "yyyy-MM-dd HH:mm:ss",
          new Date(et.setHours(et.getHours() + 24))
        );
      }
      $("#equipmentID").text(macCode);

      $("#date").text(dateFormat("yyyy-MM-dd", new Date(startTime)));
      if (intervalOne) {
        clearInterval(intervalOne);
      }
      // if (intervalTwo) {
      //     clearInterval(intervalTwo);
      // }
      layer.load();
      initHeader(macCode, startTime, endTime);
      loadStatusAndAlarm(macCode, startTime, endTime);
      loadDayOutput(macCode, startTime, endTime);
      loadTimeOutput(macCode, startTime, endTime);
      renderRunHistory(macCode, startTime, endTime);

      if (
        dateFormat("yyyy-MM-dd", dateStart) ===
          dateFormat("yyyy-MM-dd", new Date()) ||
        isBetweenZeroAndShiftStart(dateStart)
      ) {
        intervalOne = setInterval(() => {
          //if (dateFormat('yyyy-MM-dd', et) === dateFormat('yyyy-MM-dd', new Date())) {
          endTime = dateFormat("yyyy-MM-dd HH:mm:ss", new Date());
          //}
          initHeader(macCode, startTime, endTime);
          loadStatusAndAlarm(macCode, startTime, endTime);
          loadDayOutput(macCode, startTime, endTime);
          loadTimeOutput(macCode, startTime, endTime);
        }, 60 * 1000);
        // intervalTwo = setInterval(() => {
        //     //if (dateFormat('yyyy-MM-dd', et) === dateFormat('yyyy-MM-dd', new Date())) {

        // }, 60 * 1000);
      }
    } else {
      layer.closeAll("loading");
      alert("设备ID不存在");
    }
  });
}
//获取班别开始时间
function getStartTime(time, shift) {
  var dateTime = new Date(time);
  var hhmmss = dateFormat("HH:mm", dateTime) + "";
  var startTime;
  // if (typeof shift == "undefined" || shift == null || shift == "") {
  // if ('00:00' <= hhmmss && hhmmss <= '08:00') {
  //     startTime = dateFormat('yyyy-MM-dd', (new Date(dateTime.setDate(dateTime.getDate() - 1)))) + ' 20:00:00';
  // } else if ('08:00' <= hhmmss && hhmmss <= '20:00') {

  //     startTime = dateFormat('yyyy-MM-dd', dateTime) + ' 08:00:00';
  // } else if ('20:00' <= hhmmss && hhmmss <= '23:59') {
  //     startTime = dateFormat('yyyy-MM-dd', dateTime) + ' 20:00:00';
  // }
  startTime = dateFormat("yyyy-MM-dd", new Date(time)) + " 08:30:00";
  var dateNow = new Date();
  if (dateNow < new Date(startTime)) {
    var st = new Date(startTime);
    st = new Date(st.setDate(st.getDate() - 1));
    startTime = dateFormat("yyyy-MM-dd", st) + " 08:30:00";
  }
  //}
  // else if (shift == '1') {
  //     startTime = dateFormat('yyyy-MM-dd', new Date(time)) + ' 08:30:00';
  // } else {
  //     startTime = dateFormat('yyyy-MM-dd', new Date(time)) + ' 20:30:00';
  // }

  //console.log(startTime, shift);
  return startTime;
}

function isBetweenZeroAndShiftStart(time) {
  var dateDiff =
    (new Date().getTime() - time.getTime()) / (24 * 60 * 60 * 1000);
  // alert(dateDiff);
  var todayShiftStartDate = new Date(
    dateFormat("yyyy-MM-dd", new Date()) + " 08:30:00"
  );
  //alert(todayShiftStartDate);
  return dateDiff < 1 && new Date() < todayShiftStartDate;
}
// 加载头部数据
function initHeader(macCode, startTime, endTime) {
  axios
    .get(`${prefix}MacStatusTotalInfo/GetTotalInfoDeatil`, {
      params: {
        macCode: macCode,
        startTime: startTime,
        endTime: endTime,
        t: new Date().getMilliseconds(),
      },
    })
    .then((res) => {
      layer.closeAll("loading");
      if (res && res.code === 1) {
        var obj = res.data;
        $("#alarmCount").text(obj.alarmCount);
        // $('#runTimes').text(obj.runTime);
        // $('#runRate').text(obj.runRate + '%');
        $("#todayOutput").text(obj.todayCount);
        $("#monthOutput").text(obj.monthCount);
        $("#recipe").text(obj.recipe);
        $("#status")
          .removeClass()
          .addClass("conuts")
          .css(
            "color",
            `rgb(${obj.color.red},${obj.color.green},${obj.color.blue})`
          );
        $("#status").text(obj.statusCode);
        $("#regionName").text(obj.factory);
      } else {
        alert("获取数据失败");
      }
    })
    .catch((resp) => {
      console.log("请求失败：" + resp.status + "," + resp.statusText);
    });
}

// 加载机台状态分布与报警统计
function loadStatusAndAlarm(macCode, startTime, endTime) {
  var statusChart = echarts.init(document.getElementById("macStatusPie"));
  var dateNow = new Date();
  alarmBarChart.showLoading(chartLoading);
  statusChart.showLoading(chartLoading);
  axios
    .get(prefix + "MacStatusTotalInfo/GetTotalInfoDeatilForAnalysis", {
      params: {
        macCode,
        startTime: startTime,
        endTime: endTime,
      },
    })
    .then((res) => {
      if (res && res.code === 1) {
        if (res.data.runrate && res.data.runrate.length > 0) {
          var legends = [];
          var data = [];
          var runRates = res.data.runrate;
          var totalTime = 0;
          var runTime = 0;
          runRates.forEach((element) => {
            if (element.name === "运行") runTime = element.value;
            totalTime += element.value;
            legends.push(element.name);
            data.push({
              name: element.name,
              y: element.value,
              dataLabels: {
                distance: 12,
                style: {
                  color: "#eee",
                  fontSize: "12px",
                  textOutline: "none",
                },

                // backgroundColor:`transparent`,
                // fontWeight:'bold',
                // color: `rgb(${element.color.red},${element.color.green},${element.color.blue})`
                formatter: function () {
                  return (
                    '<p style="color:' +
                    this.color +
                    '">' +
                    this.point.name +
                    '</p><br><p style="color:' +
                    this.color +
                    '">' +
                    this.percentage.toFixed(1) +
                    "%</p>"
                  );
                },
              },
              color: `rgb(${element.color.red},${element.color.green},${element.color.blue})`,
            });
            // data.push({
            //     value: element.value,
            //     name: element.name,
            //     itemStyle: {
            //         normal: {
            //             color: `rgb(${element.color.red},${element.color.green},${element.color.blue})`
            //         }
            //     }
            // });
          });
          render3DStatusPie("macStatusPie", legends, data);
          $("#runTimes").text(runTime);
          $("#runRate").text(((runTime / totalTime) * 100).toFixed(2) + "%");
        }
        if (res.data.runTimes && res.data.runTimes.length > 0) {
          //#region
          // var alarms = res.data.runTimes;
          // var xdata = [];
          // var ydata = [];
          // alarms.forEach(item => {
          //     item.alarmCount = parseInt(item.alarmCount);
          //     xdata.push(item.alarmCode);
          //     ydata.push(parseInt(item.alarmCount));
          // });
          // var chartDto = {
          //     title: '报警统计图',
          //     legend: [],
          //     xdata: xdata,
          //     ydata: ydata
          // };
          // renderAlarmBar(alarmBarChart, chartDto, res.data.runTimes);
          var datas = res.data.runTimes;
          var xDatas = []; // X轴文字
          var legends = []; // 图例文字
          var seriesData = [];
          datas.forEach((item) => {
            if (xDatas.indexOf(item.day) === -1) {
              xDatas.push(item.day);
            }
            if (legends.indexOf(item.class) === -1) {
              legends.push(item.class);
            }
          });
          if (legends.length > 0) {
            legends.forEach((item) => {
              var classOutPuts = [];
              datas.forEach((element) => {
                if (element.class === item) {
                  classOutPuts.push(parseInt(element.count));
                }
              });
              seriesData.push({
                key: item,
                values: classOutPuts,
              });
            });
          }
          var colorStopses = [
            [
              {
                offset: 0,
                color: "#E69D87",
              },
              {
                offset: 1,
                color: "#E69D87",
              },
            ],
            [
              {
                offset: 0,
                color: "#D43239",
              },
              {
                offset: 1,
                color: "#D43239",
              },
            ],
          ];
          var barColors = ["#0035f9", "#25f3e6"];
          var series = [];
          seriesData.forEach((item, index) => {
            //#region ECharts数据
            // var obj = {
            //     name: item.key,
            //     type: "bar",
            //     data: item.values,
            //     barWidth: "30%",
            //     itemStyle: {
            //         normal: {
            //             color: {
            //                 type: "linear",
            //                 x: 0,
            //                 y: 0,
            //                 x2: 0,
            //                 y2: 1,
            //                 colorStops: colorStopses[index],
            //                 globalCoord: false
            //             }
            //         }
            //     },
            //     label: {
            //         show: true,
            //         color: '#fff',
            //         position: 'top',
            //         formatter: function (params) {

            //             if (params.data == 0) {
            //                 return '';
            //             }
            //             return params.data;
            //         }
            //     },
            //     barGap: "0"
            // };
            //#endregion

            var obj = {
              name: item.key,
              data: item.values,
              dataLabels: {
                enabled: true,
                color: "#FFFFFF",
                align: "center",
              },
            };
            series.push(obj);
          });

          var chartDto = {
            legends: legends,
            series: series,
          };
          statusChart.hideLoading();
          render3DTwoDayAlarm("alarmBar", series, xDatas);
        } else {
        }
      } else {
        alert("加载机台状态与报警数据失败");
      }
    })
    .catch((resp) => {
      console.log("请求失败：" + resp.status + "," + resp.statusText);
    });
}
// 绘制饼图
function renderMacStatusPie(chart, legends, data) {
  // 基于准备好的dom，初始化echarts实例
  chart.hideLoading();
  var option = {
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} 分钟 ({d}%)",
    },
    legend: {
      top: "15%",
      data: legends,
      icon: "circle",
      textStyle: {
        color: "rgba(255,255,255,.6)",
      },
      show: false,
    },
    grid: {
      left: "15%",
      top: "15%",
      right: "15%",
      bottom: "15%",
      show: false,
    },
    calculable: true,
    series: [
      {
        name: "",
        color: [
          "#62c98d",
          "#2f89cf",
          "#4cb9cf",
          "#53b666",
          "#62c98d",
          "#205acf",
          "#c9c862",
          "#c98b62",
          "#c962b9",
          "#c96262",
        ],
        type: "pie",
        radius: "70%",
        //饼图的半径，数组的第一项是内半径，第二项是外半径
        radius: ["30%", "70%"],
        //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
        center: ["50%", "55%"],

        //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
        // 'radius' 面积展现数据的百分比，半径展现数据的大小。
        //  'area' 所有扇区面积相同，仅通过半径展现数据大小
        // roseType: 'radius',
        //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: true,
            //  formatter: '{c}辆'
          },
          // emphasis: {
          //     show: true
          // }
        },
        labelLine: {
          normal: {
            show: true,
            length2: 1,
          },
          emphasis: {
            show: true,
          },
        },
        data: data,
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  chart.setOption(option);
  window.addEventListener("resize", function () {
    chart.resize();
  });
}
// 绘制机台状态3D饼图
function render3DStatusPie(chart, legends, data) {
  var chartPie;

  var option = {
    chart: {
      type: "pie",
      backgroundColor: "transparent",
      options3d: {
        enabled: true,
        alpha: 45,
      },
      renderTo: chart,
    },
    title: {
      text: null,
    },
    plotOptions: {
      pie: {
        innerSize: 45,
        depth: 35,
      },
    },
    credits: {
      enabled: false,
    },
    tooltip: {
      formatter: function () {
        return (
          "<b>" +
          this.point.name +
          "</b>: " +
          Highcharts.numberFormat(this.percentage, 2) +
          "% (" +
          Highcharts.numberFormat(this.y, 2, ".") +
          " 分钟)"
        );
      },
    },
    series: [
      {
        name: "状态",
        // dataLabels: {
        //     enabled: true,
        //     color:'#fff'
        // },
        data: [],
      },
    ],
  };

  option.series[0].data = data;
  chartPie = Highcharts.chart(option);
}

// 加载两日产量
function loadDayOutput(macCode, startTime, endTime) {
  var myChart = echarts.init(document.getElementById("twoDaysOutputBar"));
  myChart.showLoading(chartLoading);
  axios
    .get(`${prefix}MacStatusTotalInfo/GetTotalInfoDeatilForCount`, {
      params: {
        macCode,
        time: dateFormat("yyyy-MM-dd HH:mm:ss", new Date(startTime)),
      },
    })
    .then((res) => {
      if (res && res.code === 1) {
        var datas = res.data;
        var xDatas = []; // X轴文字
        var legends = []; // 图例文字
        var seriesData = [];
        datas.forEach((item) => {
          if (xDatas.indexOf(item.day) === -1) {
            xDatas.push(item.day);
          }
          if (legends.indexOf(item.class) === -1) {
            legends.push(item.class);
          }
        });
        if (legends.length > 0) {
          legends.forEach((item) => {
            var classOutPuts = [];
            datas.forEach((element) => {
              if (element.class === item) {
                var count = element.count;
                // if (count === '0') {
                //     classOutPuts.push(null);
                // } else {
                classOutPuts.push(parseInt(element.count));
                //}
              }
            });
            seriesData.push({
              key: item,
              values: classOutPuts,
            });
          });
        }
        var colorStopses = [
          [
            {
              offset: 0,
              color: "#AE48F2",
            },
            {
              offset: 1,
              color: "#AE48F2",
            },
          ],
          [
            {
              offset: 0,
              color: "#66b8a7",
            },
            {
              offset: 1,
              color: "#66b8a7",
            },
          ],
        ];
        var barColors = ["#45C295", "#75FDD4"];
        var series = [];
        seriesData.forEach((item, index) => {
          //#region Ecahrts数据
          // var obj = {
          //     name: item.key,
          //     type: "bar",
          //     data: item.values,
          //     barWidth: "30%",
          //     itemStyle: {
          //         normal: {
          //             color: {
          //                 type: "linear",
          //                 x: 0,
          //                 y: 0,
          //                 x2: 0,
          //                 y2: 1,
          //                 colorStops: colorStopses[index],
          //                 globalCoord: false
          //             }
          //         }
          //     },
          //     label: {
          //         show: true,
          //         color: '#fff',
          //         position: 'top',
          //         formatter: function (params) {

          //             if (params.data == 0) {
          //                 return '';
          //             }
          //             return params.data;
          //         }
          //     },
          //     barGap: "0"
          // };
          //#endregion
          var obj = {
            name: item.key,
            data: item.values,
            dataLabels: {
              enabled: true,
              color: "#FFFFFF",
              align: "center",
              formatter: function () {
                return this.y;
              },
            },
          };
          series.push(obj);
        });

        var chartDto = {
          legends: legends,
          series: series,
        };
      }
      myChart.hideLoading();
      render3DTwoDayOutput("twoDaysOutputBar", series, xDatas);
      //  renderTwoDaysOutputBar(myChart, legends, xDatas, series);
      // renderTwoDaysOutputNew(myChart, chartDto);
    })
    .catch((resp) => {
      console.log("请求失败：" + resp.status + "," + resp.statusText);
    });
}

function renderTwoDaysOutputNew(chart, chartDto) {
  var myData = chartDto.legends;
  var databeast = {
    1: [38, 25, 26, 32],
  };
  var databeauty = {
    1: [11, 38, 23, 30],
  };
  var timeLineData = [1];

  var option = {
    baseOption: {
      backgroundColor: "transparent",
      timeline: {
        show: false,
        top: 0,
        data: [],
      },
      legend: {
        show: true,
        left: "30%",
        top: 30,
        icon: "rect",
        textStyle: {
          itemGap: 12, //图例每项之间的间隔
          color: [],
          fontStyle: "normal",
          fontFamily: "微软雅黑",
          fontSize: 14,
        },
      },
      tooltip: {
        show: true,
        trigger: "axis",
        formatter: "{b}<br/>{c} {a}",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: [
        {
          show: false,
          left: "8%",
          top: 60,
          bottom: 0,
          containLabel: true,
          width: "30%",
        },
        {
          show: false,
          left: "57%",
          top: 60,
          bottom: 0,
          width: "0%",
        },
        {
          show: false,
          right: "8%",
          top: 60,
          bottom: 0,
          containLabel: true,
          width: "30%",
        },
      ],
      xAxis: [
        {
          type: "value",
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          position: "top",
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        {
          gridIndex: 1,
          show: false,
        },
        {
          gridIndex: 2,
          nameTextStyle: {
            color: "#50afff",
            fontSize: 14,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          position: "top",
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "category",
          inverse: true,
          position: "right",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: myData,
        },
        {
          gridIndex: 1,
          type: "category",
          inverse: true,
          position: "left",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
          data: myData.map(function (value) {
            return {
              value: value,
              textStyle: {
                align: "center",
              },
            };
          }),
        },
        {
          gridIndex: 2,
          type: "category",
          inverse: true,
          position: "left",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: myData,
        },
      ],
      series: [
        ,
        {
          name: "今天",
          type: "bar",
          barWidth: 18,
          xAxisIndex: 2,
          yAxisIndex: 2,
          label: {
            normal: {
              show: true,
              position: "right",
              offset: [0, 0],
              textStyle: {
                color: "#fff",
                fontSize: 14,
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#25f3e6",
              // barBorderRadius: 50
            },
          },
          data: databeauty[timeLineData[0]],
        },
      ],
    },
    options: [],
  };
  chart.hideLoading();
  chart.setOption(option);
  window.addEventListener("resize", function () {
    chart.resize();
  });
}

// 俩日产量3D柱状图
function render3DTwoDayOutput(elementName, series, xdata) {
  var chart;
  var options = {
    chart: {
      type: "column",
      renderTo: elementName,
      // marginBottom: 30,
      // marginLeft: 20,
      // marginTop: 20,
      // marginRight: 20,
      margin: 30,
      backgroundColor: "rgba(0,0,0,0)",
      options3d: {
        enabled: true,
        alpha: 30,
        beta: 0,
        depth: 100,
        viewDistance: 100, // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
        frame: {
          // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
          // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
          // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
          bottom: {
            size: 20,
          },
          side: {
            size: 1,
            color: "transparent",
          },
          back: {
            size: 1,
            color: "transparent",
          },
        },
      },
    },
    title: {
      text: null,
    },
    plotOptions: {
      column: {
        depth: 25,
      },
    },
    colors: ["#7cb5ec", "#e4d354"],
    credits: {
      enabled: false,
    },
    legend: {
      enabled: false,
    },
    xAxis: {
      categories: xdata,
      labels: {
        style: {
          color: "#fff",
        },
      },
      gridLineColor: "rgba(255,255,255,0.3)",
    },
    yAxis: {
      min: 0,
      minRange: 100,
      title: {
        text: null,
      },
      labels: {
        style: {
          color: "#fff",
        },
      },
      gridLineColor: "rgba(255,255,255,0.3)",
    },
    series: [],
  };
  options.series = series;
  chart = Highcharts.chart(options);
}

// 加载分时产量
function loadTimeOutput(macCode, startTime, endTime) {
  var timeOutputBarCharat = echarts.init(
    document.getElementById("timeOutputBar", "walden")
  );
  timeOutputBarCharat.showLoading(chartLoading);
  axios
    .get(`${prefix}MacStatusTotalInfo/GetTotalInfoDeatilForCountHour`, {
      params: {
        macCode,
        time: dateFormat("yyyy-MM-dd HH:mm:ss", new Date(startTime)),
      },
    })
    .then((res) => {
      if (res && res.code === 1) {
        // appendOutputBar(timeOutputBarCharat, chartDto);    // 渲染分时产量柱状图
        appendOutputLine(timeOutputBarCharat, res.data.countHour);
      } else {
        alert("加载分时产量失败");
      }
    })
    .catch((resp) => {
      console.log("请求失败：" + resp.status + "," + resp.statusText);
    });
}

// 分时产量折线图
function appendOutputLine(chart, data) {
  var xData = [];
  var yData = [];
  xData.push(8);
  yData.push(null);

  data.forEach((item) => {
    if (item.hour === 8) {
      xData.push(item.hour + ":" + "30");
    } else {
      xData.push(item.hour);
    }

    yData.push(parseInt(item.count));
  });
  var chartDto = {
    xData: xData,
    yData: yData,
  };
  renderHourOutputLine(chart, chartDto);
}

// 根据返回的数据渲染分时产量柱状图
function appendOutputBar(chart, data) {
  var xdata = [];
  var ydata = [];
  var countHours = res.data.countHour;
  if (countHours && countHours.length > 0) {
    countHours.forEach((item) => {
      xdata.push(item.hour.split(" ")[1].split(":")[0]);
      ydata.push(item.count);
    });
    var chartDto = {
      title: "分时产量",
      legend: [],
      xdata: xdata,
      ydata: ydata,
    };
  }
  renderHourOutputBar(chart, chartDto);
}

// 绘制两日报警柱状图
function renderTwoDaysAlarmBar(chart, legends, xData, series) {
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#57617B",
        },
      },
    },
    legend: {
      data: legends,
      top: "0%",
      textStyle: {
        color: "rgba(255,255,255,0.9)", //图例文字
      },
      show: false,
    },
    xAxis: [
      {
        type: "category",
        data: xData,
        axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
        axisLabel: {
          textStyle: { color: "rgba(255,255,255,1)", fontSize: "14" },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "",
        // "interval": 10,
        axisLabel: {
          show: true,
          color: "#fff",
        },
        axisLine: { lineStyle: { color: "rgba(255,255,255,.4)" } }, //左线色
      },
    ],
    grid: {
      top: "15%",
      right: "15%",
      bottom: "15%",
      left: "15%",
      show: false,
    },
    series: series,
  };
  // 使用刚指定的配置项和数据显示图表。
  chart.hideLoading();
  chart.setOption(option);
  window.addEventListener("resize", function () {
    chart.resize();
  });
}

// 俩日报警3D柱状图
function render3DTwoDayAlarm(elementName, series, xdata) {
  var chart;
  var options = {
    chart: {
      type: "column",
      renderTo: elementName,
      // marginBottom: 30,
      // marginLeft: 20,
      // marginTop: 20,
      // marginRight: 20,
      margin: 30,
      backgroundColor: "rgba(0,0,0,0)",
      options3d: {
        enabled: true,
        alpha: 30,
        beta: 0,
        depth: 100,
        viewDistance: 100, // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
        frame: {
          // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
          // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
          // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
          bottom: {
            size: 20,
          },
          side: {
            size: 1,
            color: "transparent",
          },
          back: {
            size: 1,
            color: "transparent",
          },
        },
      },
    },
    title: {
      text: null,
    },
    plotOptions: {
      column: {
        depth: 30,
      },
      cursor: "pointer",
      series: {
        cursor: "pointer",
        events: {
          click: function (event) {
            layer.open({
              type: 2,
              title: `机台【${macCode} ${event.point.category} ${event.point.series.name}】报警明细`,
              shadeClose: true,
              shade: false,
              maxmin: true, //开启最大化最小化按钮
              area: ["993px", "600px"],
              content: `./mac-alarm-detail.html?fcode=${macCode}&date=${
                event.point.category
              }&shift=${escape(event.point.series.name)}`,
            });
          },
        },
      },
    },
    colors: ["#E69D87", "#D43239"],
    credits: {
      enabled: false,
    },
    legend: {
      enabled: false,
    },
    xAxis: {
      categories: xdata,
      labels: {
        style: {
          color: "#fff",
        },
      },
      splitLine: {
        show: false,
      },
      gridLineColor: "rgba(255,255,255,0.3)",
    },
    yAxis: {
      min: 0,
      minRange: 100,
      title: {
        text: null,
      },
      labels: {
        style: {
          color: "#fff",
        },
      },
      gridLineColor: "rgba(255,255,255,0.3)",
    },
    series: [],
  };
  options.series = series;
  chart = Highcharts.chart(options);
}

// 绘制两日产量柱状图
function renderTwoDaysOutputBar(chart, legends, xData, series) {
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#57617B",
        },
      },
    },
    legend: {
      data: legends,
      top: "0%",
      textStyle: {
        color: "rgba(255,255,255,0.9)", //图例文字
      },
      show: false,
    },
    xAxis: [
      {
        type: "category",
        data: xData,
        axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
        axisLabel: {
          textStyle: { color: "rgba(255,255,255,1)", fontSize: "14" },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "",
        // "interval": 10,
        axisLabel: {
          show: true,
          color: "#fff",
        },
        axisLine: { lineStyle: { color: "rgba(255,255,255,.4)" } }, //左线色
      },
    ],
    grid: {
      top: "15%",
      right: "15%",
      bottom: "15%",
      left: "15%",
      show: false,
    },
    series: series,
  };
  // 使用刚指定的配置项和数据显示图表。
  chart.hideLoading();
  chart.setOption(option);
  window.addEventListener("resize", function () {
    chart.resize();
  });
}

// 渲染分时产量柱状图
function renderHourOutputBar(chart, chartDto) {
  var options = {
    title: {
      text: chartDto.text,
    },
    tooltip: {
      // formatter: function (params, ticket, callback) {
      //     var toolTip = '';
      //     alarms.forEach(item => {
      //         if (item.alarmCode === params.name) {
      //             toolTip = item.alarmDescribe;
      //         }
      //     });
      // return toolTip;
      //  }
    },
    legend: {
      data: chartDto.legend,
    },
    grid: {
      right: "15%",
      bottom: "15%",
      top: "15%",
      left: "15%",
    },
    xAxis: {
      data: chartDto.xdata,
      axisLabel: {
        interval: 2,
        textStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        name: "产量",
        type: "bar",
        barMaxWidth: 35,
        data: chartDto.ydata,
        itemStyle: {
          normal: {
            color: "rgb(120,200,235)",
            label: {
              show: false, // 开启显示
              position: "top", // 在上方显示
              textStyle: {
                // 数值样式
                color: "#fff",
                fontSize: 12,
                interval: 2,
              },
            },
          },
        },
      },
    ],
  };
  chart.hideLoading();
  chart.setOption(options);
  window.addEventListener("resize", function () {
    chart.resize();
  });
}

// 渲染分时产量折线图
function renderHourOutputLine(chart, chartDto) {
  var options = {
    tooltip: {
      axisPointer: {
        axis: "x",
        type: "none",
      },
      position: function (pt) {
        return [pt[0], "5%"];
      },
      formatter: function (params) {
        // console.log(params);
        return params.name + "点产量：" + params.value;
      },
    },
    title: {
      left: "left",
      show: false,
    },
    legend: {
      width: "70%",
      show: false,
    },
    grid: {
      right: "15%",
      bottom: "15%",
      top: "15%",
      left: "15%",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: chartDto.xData,
      axisLabel: {
        //  interval: 2,
        textStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        // interval: 2,
        textStyle: {
          color: "#fff",
        },
      },
    },
    dataZoom: [
      {
        type: "inside",
        start: 0,
        end: 100,
      },
      {
        start: 0,
        end: 10,
        handleSize: "80%",
        show: false,
        handleStyle: {
          color: "#fff",
          shadowBlur: 3,
          shadowColor: "rgba(0, 0, 0, 0.6)",
          shadowOffsetX: 2,
          shadowOffsetY: 2,
        },
      },
    ],
    series: {
      name: "产量",
      type: "line",
      data: chartDto.yData,
      itemStyle: {
        normal: {
          color: "#F6C948",
          label: {
            show: true, // 开启显示
            position: "top", // 在上方显示
            textStyle: {
              // 数值样式
              color: "#fff",
              fontSize: 11,
              interval: 0,
            },
          },
        },
      },
    },
  };
  chart.hideLoading();
  chart.setOption(options);
  window.addEventListener("resize", function () {
    chart.resize();
  });
}

// 渲染报警统计柱状图
function renderAlarmBar(chart, chartDto, alarms) {
  var max = 0;
  if (alarms && alarms.length > 0) {
    max = alarms[0].alarmCount;
    alarms.forEach((item) => {
      if (max < item.alarmCount) {
        max = item.alarmCount;
      }
    });
  }
  var options = {
    title: {
      text: chartDto.text,
    },
    tooltip: {
      formatter: function (params, ticket, callback) {
        var toolTip = "";
        alarms.forEach((item) => {
          if (item.alarmCode === params.name) {
            toolTip = item.alarmDescribe;
          }
        });
        return toolTip;
      },
    },
    legend: {
      data: chartDto.legend,
    },
    grid: {
      right: "15%",
      bottom: "15%",
      top: "15%",
      left: "15%",
    },
    xAxis: {
      data: chartDto.xdata,
      axisLabel: {
        interval: 2,
        textStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      // min: 0,
      // max: max,
      // splitNumber: 2,
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        name: "报警次数",
        type: "bar",
        barMaxWidth: 35,
        data: chartDto.ydata,
        itemStyle: {
          normal: {
            color: "rgb(255,0,0)",
            label: {
              show: true, // 开启显示
              position: "top", // 在上方显示
              textStyle: {
                // 数值样式
                color: "#fff",
                fontSize: 12,
              },
            },
          },
        },
      },
    ],
  };
  chart.hideLoading();
  chart.setOption(options);
  window.addEventListener("resize", function () {
    chart.resize();
  });
}

var legends = ["RUN", "DISCONN", "REPAIR", "PM", "ERROR", "IDLE", "CHANGE"];

//#region 稼动历史
// 渲染机台稼动历史图表
function renderRunHistory(macCode, startTime, endTime) {
  var dateNow = new Date();
  var dateStart = startTime;
  var dateEnd = endTime;
  axios
    .get(`${prefix}MacStatusTotalInfo/GetRunHistroy`, {
      params: {
        macCode,
        startTime: dateStart,
        endTime: dateEnd,
      },
    })
    .then((res) => {
      if (res && res.code === 1) {
        var data = [];
        var categories = [""];
        var datas = res.data;
        datas.forEach((item, index) => {
          data.push({
            name: item.name,
            value: [
              index,
              item.startTime,
              item.endTime,
              item.timeLen,
              item.startString,
              item.endString,
              item.statusName,
              item.duration,
            ],
            itemStyle: {
              normal: {
                color: `rgb(${item.color.red},${item.color.green},${item.color.blue})`,
              },
            },
          });
        });

        option = {
          tooltip: {
            formatter: function (params) {
              return (
                params.marker +
                params.value[6] +
                ": " +
                "从 " +
                params.value[4] +
                " 到 " +
                params.value[5] +
                " 持续 " +
                params.value[7]
              );
            },
          },
          title: {
            show: false,
          },
          grid: {
            right: "5%",
            height: 60,
            top: "4%",
            left: "5%",
          },

          legend: {
            data: legends,
            bottom: 0,
            left: "center",
            textStyle: {
              color: "#ffffff",
            },
          },
          dataZoom: [
            {
              type: "slider",
              filterMode: "weakFilter",
              showDataShadow: false,
              show: false,
              top: 150,
              height: 5,
              borderColor: "transparent",
              backgroundColor: "#e2e2e2",
              handleIcon:
                "M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z", // jshint ignore:line
              handleSize: 10,
              handleStyle: {
                shadowBlur: 6,
                shadowOffsetX: 1,
                shadowOffsetY: 2,
                shadowColor: "#aaa",
              },
              labelFormatter: "",
            },
            {
              type: "inside",
              filterMode: "weakFilter",
            },
          ],
          // grid: {
          //
          // },
          xAxis: {
            type: "time",
            min: dateStart,
            max: dateEnd,
            axisLabel: {
              formatter: function (val) {
                var date = new Date(val);
                var valStr = dateFormat("yyyy-MM-dd H:mm", date);
                return valStr.split(" ")[1];
              },
              color: "#fff",
              interval: 0,
            },
          },
          yAxis: {
            data: categories,
            axisLabel: {
              show: false,
            },
          },
          series: [
            {
              type: "custom",
              progressive: 0,
              progressiveThreshold: 1,
              renderItem: renderItem,
              itemStyle: {
                opacity: 1,
              },
              encode: {
                x: [1, 2],
                y: 0,
              },
              data: data,
            },
          ],
        };

        var runHistoryChart = echarts.init(
          document.getElementById("runHistory", "walden")
        );
        runHistoryChart.setOption(option);
        window.addEventListener("resize", function () {
          runHistoryChart.resize();
        });
        var nowStr = dateFormat("yyyy-MM-dd", new Date()) + " 08:30:00";
        var dayStart = new Date(
          dateFormat("yyyy-MM-dd", new Date()) + " 00:00:00"
        );
        var todayShiftStart = new Date(
          dateFormat("yyyy-MM-dd", new Date()) + " 08:30:00"
        );
        var now = new Date();
        if (timeOut) {
          clearTimeout(timeOut);
        }
        if (
          dateStart == nowStr ||
          isBetweenZeroAndShiftStart(new Date(dateStart))
        ) {
          timeOut = setTimeout(() => {
            appendRunHistory(macCode, runHistoryChart, dateStart, true);
          }, 60 * 1000);
        }
      } else {
        alert("加载机台运行状态失败");
      }
    })
    .catch((resp) => {
      console.log("请求失败：" + resp.status + "," + resp.statusText);
    });
}

function renderItem(params, api) {
  var categoryIndex = api.value(0);
  var start = api.coord([api.value(1), categoryIndex]);
  var end = api.coord([api.value(2), categoryIndex]);
  var height = api.size([0, 1])[1] * 1;

  var rectShape = echarts.graphic.clipRectByRect(
    {
      x: start[0],
      y: start[1] - height / 2,
      width: end[0] - start[0],
      height: height,
    },
    {
      x: params.coordSys.x,
      y: params.coordSys.y,
      width: params.coordSys.width,
      height: params.coordSys.height,
    }
  );

  return (
    rectShape && {
      type: "rect",
      shape: rectShape,
      style: api.style(),
    }
  );
}

function appendRunHistory(macCode, runHistoryChart, startTime, interval) {
  var dateNow = new Date();
  var dateEndNew = dateFormat("yyyy-MM-dd HH:mm:ss", dateNow);
  axios
    .get(`${prefix}MacStatusTotalInfo/GetRunHistroy`, {
      params: {
        macCode,
        startTime: startTime,
        endTime: dateEndNew,
      },
    })
    .then((res) => {
      if (res && res.code === 1) {
        var data = [];
        var categories = [""];
        var datas = res.data;
        datas.forEach((item, index) => {
          // var typeItem;
          // types.forEach(t => {
          //     if (t.name === item.status) {
          //         typeItem = t;
          //     }
          // });
          data.push({
            name: item.name,
            value: [
              index,
              item.startTime,
              item.endTime,
              item.timeLen,
              item.startString,
              item.endString,
              item.statusName,
              item.duration,
            ],
            itemStyle: {
              normal: {
                color: `rgb(${item.color.red},${item.color.green},${item.color.blue})`,
              },
            },
          });
        });
        runHistoryChart.setOption({
          series: {
            data: data,
          },
          xAxis: {
            max: dateEndNew,
          },
        });
      }
      if (timeOut) {
        clearTimeout(timeOut);
      }
      timeOut = setTimeout(() => {
        appendRunHistory(macCode, runHistoryChart, startTime);
      }, 60 * 1000);
    })
    .catch((resp) => {
      console.log("请求失败：" + resp.status + "," + resp.statusText);
    });
}

// 获取状态对应的颜色
function returnColor(status) {
  var color = "#ccc";
  types.forEach((item) => {
    if (item.desc === status) {
      color = item.color;
    }
  });
  return color;
}
//#endregion