<template>
  <div>
    <div class="divborder newSearchDiv" style="margin: 0px">
      <div class="filter">
        <label>产线层级：</label>
        <Cascader
          :data="levelData"
          :value="curLevel"
          trigger="click"
          change-on-select
          class="searchSelect"
          @on-change="cascaderChange"
        ></Cascader>
      </div>
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search-outline"
          @click="search()"
          >查询</Button
        >
      </div>
    </div>
    <div class="divborder newEchartStyle echo_box">
      <div class="reportleft" v-show="oderreport">
        <Input
          v-model="orderno"
          placeholder="请扫描工序码"
          class="searchInput middleWidth"
          @input="getOrderInfo()"
        />
        <div class="reportinfo">
          <p>
            <label>产品编号：</label>
            <span>{{ productcode }}</span>
          </p>
          <p>
            <label>当前工位：</label>
            <span>{{ sectionname }}</span>
          </p>
          <p>
            <label>产品名称：</label>
            <span>{{ productname }}</span>
          </p>
          <p>
            <label>计划数量：</label>
            <span>{{ plannum }}</span>
          </p>
          <p>
            <label>已报工数量：</label>
            <span>{{ number }}</span>
          </p>
          <p>
            <label>合格数量：</label>
            <span>{{ oknum }}</span>
          </p>
          <p>
            <label>不合格数量：</label>
            <span>{{ noknum }}</span>
          </p>
          <p>
            <label>计划结束时间：</label>
            <span>{{ plantime }}</span>
          </p>
          <p>
            <label>工令号：</label>
            <span>{{ workorderno }}</span>
          </p>
          <p>
            <label>操作人：</label>
            <span>{{ operator }}</span>
          </p>
        </div>
        <div class="reportBtnWrap">
          <Button
            v-show="showRebtn"
            type="primary"
            @click="addreport()"
            class="reportBtn"
            >报工</Button
          >
        </div>
      </div>
      <div class="reportright" v-show="echartshow">
        <!-- 切片图 -->
        <div class="slice-map" ref="slicemap"></div>
        <div>
          <!-- 状态图 -->
          <div class="statusTable">
            <Table
              v-show="statusdata.length"
              :columns="statuscolumns"
              :data="statusdata"
            ></Table>
          </div>
          <!-- 仪表图 -->
          <div class="oeeitem">
            <div class="oeeid" id="oeeid_one"></div>
            <div class="oeeid" id="oeeid_two"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 报工弹窗 -->
    <Modal
      class="newModalClass"
      title="报工"
      v-model="lookModal"
      :styles="{ width: '520px' }"
    >
      <div class="modal_body" style="padding-right: 40px">
        <div class="filter">
          <label> <i>*</i>报工人： </label>
          <Select v-model="addreportname" class="searchSelect">
            <Option
              v-for="(item, key) in userlist"
              :value="item.id"
              :key="key"
              >{{ item.text }}</Option
            >
          </Select>
        </div>
        <div class="filter">
          <label>
            <i>*</i>
            OK产量：
          </label>
          <InputNumber
            v-model="addoknum"
            class="searchInput"
            :min="0"
            :max="999999999"
            onkeypress="return /[\d]/.test(String.fromCharCode(event.keyCode))"
          />
        </div>
        <div class="filter">
          <label>
            <i>*</i>
            NOK产量：
          </label>
          <InputNumber
            v-model="addnoknum"
            class="searchInput"
            :min="0"
            :max="999999999"
            onkeypress="return /[\d]/.test(String.fromCharCode(event.keyCode))"
          />
        </div>
      </div>
      <div slot="footer">
        <Button size="large" @click="lookModal = false" v-text="$t(1033)"
          >取消</Button
        >
        <Button
          type="primary"
          size="large"
          :disabled="isLoading"
          @click="addreportPost()"
          >确定</Button
        >
      </div>
    </Modal>
  </div>
</template>
<script>
import moment from "moment";
import echarts from "echarts";
import { mapState } from "vuex";

export default {
  data() {
    return {
      isLoading: false,
      // 产线层级级联数据
      levelData: [],
      // 搜索条件--产线层级
      curLevel: [],
      // 产线层级深度
      levelNums: 0,
      // 工序码
      orderno: "",
      // 报工按钮是否显示
      showRebtn: false,
      // 报工表单是否显示
      oderreport: false,
      // 可视化图表是否显示
      echartshow: false,
      // 报工表单--产品编号
      productcode: "",
      // 报工表单--产品名称
      productname: "",
      // 报工表单--计划数量
      plannum: "",
      // 报工表单--当前工位
      sectionname: "",
      // 报工表单--已报工数量
      number: "",
      // 报工表单--合格数量
      oknum: "",
      // 报工表单--不合格数量
      noknum: "",
      // 报工表单--计划结束时间
      plantime: "",
      // 报工表单--工令号
      workorderno: "",
      // 报工表单--操作人
      operator: "",
      // 报工弹框是否显示
      lookModal: false,
      // 报工人下拉列表
      userlist: [],
      // 当前选中报工人
      addreportname: "",
      // 报工-- OK 产量
      addoknum: null,
      // 报工-- NOK 产量
      addnoknum: null,

      statusdata: [],
      statuscolumns: [
        {
          title: this.$t(200054),
          key: "status",
        },
        {
          title: this.$t(901000),
          key: "timenum",
        },
      ],
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    // 获取产线层级级联数据
    this.getCascader();
  },
  methods: {
    // 获取产线层级级联数据
    getCascader() {
      const _this = this;
      _this.axios
        .request({
          url: "/config/ProjectLevelSection/GetSectionTree",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            _this.levelData = data;
            _this.levelNums = _this.getMaxFloor(data);
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 监听产线层级级联数据变化
    cascaderChange(v) {
      this.curLevel = v;
    },
    // 根据树形结构数据算出树形结构数据的深度
    getMaxFloor(treeData) {
      let floor = 0;
      let max = 0;
      function each(data, floor) {
        data.forEach((e) => {
          e.floor = floor;
          if (floor > max) {
            max = floor;
          }
          if (e.children.length > 0) {
            each(e.children, floor + 1);
          }
        });
      }
      each(treeData, 1);
      return max;
    },
    // 清空报工表单数据
    clearInfo() {
      this.productcode = "";
      this.sectionname = "";
      this.productname = "";
      this.plannum = "";
      this.number = "";
      this.oknum = "";
      this.noknum = "";
      this.plantime = "";
      this.workorderno = "";
      this.operator = "";
    },
    // 查询
    search() {
      const _this = this;
      // 解构取值
      let { levelNums, curLevel } = this;
      if (curLevel.length != levelNums) {
        _this.$Message.error("请选择到具体工位！");
        return false;
      }
      let params = {
        id: curLevel[curLevel.length - 1],
      };
      _this.axios
        .request({
          url: "/config/Machine/GetmachineidBySection",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            // 1.工序码报工
            // 报工按钮隐藏
            this.showRebtn = false;
            // 报工表单显示
            this.oderreport = true;
            // 工序码置空
            this.orderno = "";
            // 清空报工表单数据
            this.clearInfo();
            // 2.可视化图表
            // 可视化图表显示
            this.echartshow = true;
            this.getReadyData(curLevel[curLevel.length - 1]);
          } else {
            _this.$Message.error(_this.$t(444456));
          }
        });
    },
    // 获取可视化图表数据
    getReadyData(section_id) {
      const _this = this;
      // 初始化查询条件--时间范围
      let nowDate = moment(new Date().getTime()).format("YYYY-MM-DD");
      // 请求入参
      let params = {
        sectionId: section_id,
        timeSection: `${nowDate} 00:00:00 - ${nowDate} ${moment(
          new Date().getTime()
        ).format("HH:mm:ss")}`,
      };
      _this.axios
        .request({
          url: "/cnc/ProjectSectionMachine/MachineCanvasPrograms",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.canvas && result.canvas.length) {
            // 新切片
            _this.GetCanvasData(result.canvas, result.pareto);
            // 获取 OEE
            _this.getOee();
            // 运行时长
            let data = result.pareto[0].listShutdownHoldTime;
            let shutdown = 0;
            let running = 0;
            let debugging = 0;
            let free = 0;
            let fault = 0;
            data.forEach((item, index) => {
              if (item.factor == "shutdown") {
                shutdown = (item.timeSpan / 3600).toFixed(2);
              } else if (item.factor == "running") {
                running = (item.timeSpan / 3600).toFixed(2);
              } else if (item.factor == "debugging") {
                debugging = (item.timeSpan / 3600).toFixed(2);
              } else if (item.factor == "free") {
                free = (item.timeSpan / 3600).toFixed(2);
              } else if (item.factor == "fault") {
                fault = (item.timeSpan / 3600).toFixed(2);
              }
            });
            _this.statusdata = [
              {
                status: _this.$t(500040),
                timenum: shutdown,
              },
              {
                status: _this.$t(500041),
                timenum: running,
              },
              {
                status: _this.$t(901001),
                timenum: debugging,
              },
              {
                status: _this.$t(500043),
                timenum: free,
              },
              {
                status: _this.$t(500044),
                timenum: fault,
              },
            ];
          }
        });
    },
    // 获取报工表单数据
    getOrderInfo() {
      const _this = this;
      // 解构取值
      let { orderno, curLevel } = this;
      // 表单验证
      if (!orderno) {
        return false;
      }
      if (!curLevel[curLevel.length - 1]) {
        return false;
      }
      // 初始化表单数据
      _this.clearInfo();
      // 请求入参
      let data = {
        sectionid: curLevel[curLevel.length - 1],
        orderno: orderno.split("|")[0],
        route_id: parseInt(orderno.split("|")[1]),
      };
      _this.axios
        .request({
          url: "cnc/WorkOrderList/GetWorkOrdersDetail",
          data,
          method: "post",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            if (data) {
              _this.showRebtn = true;
              _this.productcode = data.product_code;
              _this.productname = data.product_name;
              _this.plannum = data.quantity;
              _this.sectionname = data.sectionname;
              _this.number = data.producted_number;
              _this.oknum = data.ok_number;
              _this.noknum = data.nok_number;
              _this.plantime = data.plan_endtime;
              _this.workorderno = _this.orderno.split("|")[0];
              _this.operator = _this.user.userName;
              _this.routename = data.route_name;
            } else {
              _this.showRebtn = false;
            }
          } else {
            // _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 点击报工按钮
    addreport() {
      // 获取报工人
      this.init_user();
      // 清空历史数据
      this.addreportname = "";
      this.addoknum = null;
      this.addnoknum = null;
      this.isLoading = false;
      // 报工弹框弹出
      this.lookModal = true;
    },
    // 获取报工人下拉列表
    init_user() {
      const _this = this;
      _this.axios
        .request({
          url: "/cnc/ProductReport/GetWorkCode",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.userlist = result.data;
            // 默认选中当前登录人
            // _this.$nextTick(() => {
            //   _this.addreportname = _this.user.userId;
            // });
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 发送报工请求之前
    addreportPost() {
      const _this = this;
      // 解构取值
      let { addoknum, addnoknum, addreportname } = this;
      // 表单必填项验证
      if (!addreportname) {
        _this.$Message.error("请选择报工人");
        return false;
      }
      if (addoknum == 0 && addnoknum == 0) {
        _this.$Message.error("OK产量与NOK产量不能同时为0");
        return false;
      }
      if (!addoknum && addoknum != 0) {
        _this.$Message.error("请输入OK产量");
        return false;
      }
      if (!addnoknum && addnoknum != 0) {
        _this.$Message.error("请输入NOK产量");
        return false;
      }

      // 组装数据
      let data = {
        actualoutput: addoknum,
        code: _this.orderno.split("|")[0],
        noknumber: addnoknum,
        workercode: addreportname,
        machineId: _this.curLevel[_this.curLevel.length - 1],
        route_name: _this.routename,
        route_id: parseInt(_this.orderno.split("|")[1]),
      };
      _this.doReportPost(data);
    },
    // 发送报工请求
    doReportPost(data) {
      const _this = this;
      _this.isLoading = true;

      _this.axios
        .request({
          url: "cnc/WorkOrderList/AddProduceReport",
          data,
          method: "post",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.$Message.success(_this.$t(result.msg));
            _this.lookModal = false;
            _this.oknum = _this.oknum + _this.addoknum;
            _this.noknum = _this.noknum + _this.addnoknum;
            _this.number = _this.oknum + _this.noknum;
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 以下都是渲染右边图表和表格的方法
    getOee() {
      const _this = this;
      // 解构取值
      let { curLevel } = this;
      let params = {
        sectionId: curLevel[curLevel.length - 1],
      };
      _this.axios
        .request({
          url: "/cnc/WorkOrder/GetMachineReportOee",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let arr1 = {
              title: "综合OEE",
              name: "OEE",
              value: result.data.oee,
              id: "oeeid_one",
            };
            this.getOEEcharts(arr1);
            let arr2 = {
              title: "质量合格率",
              name: "质量合格率",
              value: result.data.quantityRate,
              id: "oeeid_two",
            };
            this.getOEEcharts(arr2);
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    getOEEcharts(data) {
      let myChartone = echarts.init(document.getElementById(data.id));
      let option = {
        title: {
          text: data.title,
          left: "center",
          textStyle: {
            fontSize: 18,
          },
          subtextStyle: {
            fontSize: 14,
          },
        },
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        toolbox: {},
        series: [
          {
            name: data.title,
            type: "gauge",
            detail: { formatter: "{value}%" },
            data: [{ value: data.value }],
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [0.2, "#c23531"],
                  [0.8, "#63869e"],
                  [1, "#91c7ae"],
                ],
              },
            },
          },
        ],
      };
      myChartone.setOption(option);
    },
    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);
    },
    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
    ) {
      // var width = document.getElementsByClassName('echart-div-list').width
      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 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: false,
            formatter: (value) => {
              return this.fmtDate(value);
            },
          },
          splitLine: {
            show: true,
          },
          min: "dataMin",
          max: "dataMax",
        },

        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,
          },
        ],
      };
      var div = document.getElementById("new_" + canvasDataKey);
      var myChart = echarts.init(div);
      if (typeof option === "object") {
        myChart.setOption(option, true);
      }
    },
    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;
    },
  },
};
</script>

<style lang="less" scoped>
.echo_box {
  overflow: initial;
  min-height: 520px;
}
.reportleft {
  width: 350px;
  height: 500px;
  background-color: #f5f5f5;
  padding: 10px;
  float: left;
  .reportinfo {
    padding: 10px;
    p {
      margin: 14px 10px;
      font-size: 14px;
      label {
        width: 100px;
        text-align: right;
        display: inline-block;
      }
    }
  }
  .reportBtnWrap {
    text-align: center;
    .reportBtn {
      width: 80%;
    }
  }
}
.reportright {
  float: left;
  width: calc(~"100% - 350px");
  padding: 0px 10px;
  .slice-map {
    height: 200px;
    padding: 30px;
  }
  .statusTable {
    width: 30%;
    height: 300px;
    float: left;
  }
  .oeeitem {
    width: 70%;
    float: left;
    .oeeid {
      width: 50%;
      height: 300px;
      float: left;
    }
  }
}
</style>
