<template>
  <div class="testdiv">
    <div class="divborder parameterStatus" style="margin:0px;">
      <ul>
        <li style="margin-left: 0px;">
          <div class="EquipmentStatus E_1">
            <img src="../../../assets/images/99.jpg" alt width="95" height="120" />
            <div class="EquipmentStatus_2">
              <div class="EquipmentStatus_2_top">{{$t('800259')}}</div>
              <div class="EquipmentStatus_2_content" id="abnormal">{{abnormalcount}}</div>
            </div>
          </div>
        </li>
        <li>
          <div class="EquipmentStatus E_2">
            <img src="../../../assets/images/88.jpg" alt width="95" height="120" />
            <div class="EquipmentStatus_2">
              <div class="EquipmentStatus_2_top">{{$t('810006')}}</div>
              <div class="EquipmentStatus_2_content" id="normal">{{normalcount}}</div>
            </div>
          </div>
        </li>
        <li>
          <div id="spindleStatus"></div>
        </li>
      </ul>
    </div>

    <div class="divborder newTableDiv">
      <Table class="tableClass" highlight-row :data="tableData1" :columns="tableColumns1"></Table>
    </div>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
import echarts from "echarts";
export default {
  components: {},
  data() {
    return {
      tableData1: [], // 列表数据
      abnormalcount: 0,
      normalcount: 0,
      tableColumns1: [
        {
          title: this.$t("1131"),
          key: "section_name",
          align: "center",
          width: 100,
          render: (h, params) => {
            let dir = null;
            if (params.row.row_count > 0) {
              dir = [
                {
                  name: "cell",
                  arg: "rowSpan",
                  value: params.row.row_count,
                },
              ];
            } else {
              dir = [
                {
                  name: "rmcell",
                  arg: "rowSpan",
                  value: params.row.row_count,
                },
              ];
            }
            return h(
              "Tooltip",
              {
                directives: dir,
                style: {
                  whiteSpace: "nowrap",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  display: "block",
                },
                class: {
                  echo_tooltip: true,
                },
                props: {
                  content: params.row.section_name,
                  placement: "top",
                },
              },
              params.row.section_name
            );
          },
        },
        {
          title: this.$t("500132"),
          key: "station_name",
          tooltip: true,
        },
        {
          title: this.$t("500079"),
          key: "exception_type",
          tooltip: true,
        },
        {
          title: this.$t("500080"),
          key: "values",
          tooltip: true,
        },
        {
          title: this.$t("500081"),
          key: "uplimit",
          tooltip: true,
        },
        {
          title: this.$t("500082"),
          key: "downlimit",
          tooltip: true,
        },
        {
          title: this.$t("1049"),
          key: "startTime",
          tooltip: true,
        },
        {
          title: this.$t("500083"),
          key: "time_span",
          tooltip: true,
        },
        {
          title: this.$t("400008"),
          key: "endOf",
          tooltip: true,
        },
      ],
    };
  },
  created() {
    this.search();
    // 格式化表格样式
    this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
  },
  methods: {
    search() {
      axios
        .request({
          url: "/cnc/ParameterMonitor/getAbnormalDetail",
          method: "get",
        })
        .then((res) => {
          this.tableData1 = [];
          var data = res.data.data;
          if (res.data.ret === 1) {
            if (
              data.productionParameterLis !== undefined &&
              data.productionParameterLis !== {}
            ) {
              this.mockTableData1(data.productionParameterLis);
              this.pie(data.pieChart);
            }
            this.abnormalcount = data.exceptionCount;
            this.normalcount = data.normalCount;
          } else {
            this.normalcount = data.machine_nums;
          }
        });
    },
    pie(data) {
      var data_1 = [this.$t("800260"), this.$t("800261"), this.$t("800262")];
      var myChart1 = echarts.init(document.getElementById("spindleStatus"));
      var option = {
        title: {
          textStyle: {
            fontSize: 18,
          },
          subtextStyle: {
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: ["#F56954", "#00A65A", "#F39C12"],
        legend: {
          orient: "vertical",
          x: "right",
          y: "center",
          data: data_1 /* '主轴转速异常','转速倍率异常','进给倍率异常' */,
        },
        series: [
          {
            name: this.$t("800263") /* 参数异常报警 */,
            type: "pie",
            radius: ["50%", "80%"],
            center: ["25%", "45%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "10",
                  fontWeight: "bold",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              { name: this.$t(data[0].name), value: data[0].value },
              { name: this.$t(data[1].name), value: data[1].value },
              { name: this.$t(data[2].name), value: data[2].value },
            ],
          },
        ],
      };
      myChart1.setOption(option);
    },
    mockTableData1(tablelist) {
      let data = [];
      Object.keys(tablelist).forEach((i) => {
        tablelist[i].forEach((item) => {
          data.push({
            row_count: item.row_count,
            section_name: item.section_name,
            station_name: item.station_name,
            exception_type: this.formatexception(item.exception_type),
            values: item.values,
            uplimit: item.uplimit,
            downlimit: item.downlimit,
            startTime: item.startTime,
            time_span: this.timechange(item.timeSpan),
            endOf: this.$t(item.endOf === 1 ? "800257" : "800258"),
          });
        });
      });
      this.tableData1 = data;
    },
    formatexception(exception_type) {
      switch (exception_type) {
        case 1:
          return this.$t("500054");
        case 2:
          return this.$t("500055");
        case 3:
          return this.$t("500049");
        default:
          return exception_type;
      }
    },
    timechange(num) {
      var str = "";
      if (num > 86400) {
        let d = Math.floor(num / 86400);
        let h = Math.floor((num % 86400) / 3600);
        let m = Math.floor(((num % 86400) % 3600) / 60);
        let s = ((num % 86400) % 3600) % 60;
        str =
          d +
          this.$t("1101") +
          h +
          this.$t("1102") +
          m +
          this.$t("1103") +
          s +
          this.$t("1104");
        return str;
      } else if (num > 3600) {
        let h = Math.floor(num / 3600);
        let m = Math.floor((num % 3600) / 60);
        let s = (num % 24) % 60;
        str = h + this.$t("1102") + m + this.$t("1103") + s + this.$t("1104");
        return str;
      } else if (num > 60) {
        let m = Math.floor(num / 60);
        let s = Math.floor(num % 60);
        str = "" + m + this.$t("1103") + s + this.$t("1104");
        return str;
      } else {
        str = num + this.$t("1104");
        return str;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.parameterStatus ul {
  width: 100%;
}
.parameterStatus ul li {
  margin-left: 35px;
  display: inline-block;
}
.EquipmentStatus {
  width: 250px;
  height: 120px;
  display: inline-block;
}
.E_1 {
  background: #f39c12;
}
.E_2 {
  background: #5cb85c;
}

#spindleStatus {
  width: 300px;
  height: 120px;
  border: 0px solid red;
}

.EquipmentStatus img {
  vertical-align: baseline;
}
.EquipmentStatus_2 {
  float: right;
  width: 150px;
  height: 120px;
}
.EquipmentStatus_2_top {
  width: 100%;
  height: 20px;
  margin-top: 5px;
  text-align: center;
  color: white;
}
.EquipmentStatus_2_content {
  width: 70%;
  height: 60px;
  margin: auto;
  text-align: center;
  font-size: 60px;
  color: white;
}
</style>
