<template>
  <div class="home_box">
    <div class="epms_container flex">
      <!-- 右侧产线设备列表 -->
      <div class="right_box" style="width: 100%; overflow: hidden">
        <!-- <div class="left_title">{{ $t("PAGE") }}</div> -->
        <div v-if="quickList.length" class="quick_box flex">
          <div
            v-for="(item, index) in quickList"
            :key="index"
            class="quick_card cursor-pointer"
            @click="onGoPath(item.path)"
          >
            <div class="quick_name">{{ item.name }}</div>
          </div>
        </div>
        <div class="flex bottom_box">
          <div v-if="toDoList.length" class="todo_box">
            <div class="todo_title flex justify-between items-center">
              <div class="left_title" style="margin-bottom: 0">
                {{ $t("NEED_DEALT") }}
              </div>
              <div
                class="todo_more flex items-center cursor-pointer"
                @click="
                  onGoPath(
                    curTodoIndex === '1'
                      ? '/eam/to_do/eqp_fix'
                      : '/eam/to_do/examine'
                  )
                "
              >
                {{ $t("MORE") }}
                <Icon
                  style="margin-left: 5px"
                  type="icon-dir-f-circle-right"
                  :size="16"
                />
              </div>
            </div>
            <div class="todo_card_box flex flex-col">
              <div class="todo_tabs_box flex">
                <div
                  class="todo_tabs cursor-pointer"
                  :class="{ active_tab: curTodoIndex === '1' }"
                  @click="onChangeTo('1')"
                >
                  {{ $t("EPMS_FIX") }}
                </div>
                <div
                  class="todo_tabs cursor-pointer"
                  :class="{ active_tab: curTodoIndex === '2' }"
                  @click="onChangeTo('2')"
                >
                  {{ $t("EXAMINE") }}
                </div>
              </div>
              <div v-if="curTodoIndex === '1'">
                <div
                  v-for="(item, index) in fixList"
                  :key="index"
                  class="todo_card flex flex-col"
                >
                  <div class="status_title flex items-center">
                    <div
                      class="status_name"
                      :style="{
                        backgroundColor: statusData[item.status]
                          ? statusData[item.status].color
                          : statusData['WAIT_CALL'].color,
                      }"
                    >
                      {{ statusData[item.status].title }}
                    </div>
                    <div class="title">
                      {{ item.eqpName }}-{{ item.eqpCode }}
                    </div>
                  </div>
                  <div class="flex flex-col content_box">
                    <!-- 设备名称v-if="item.repairTicketCode" -->
                    <div class="content flex items-center">
                      <div class="content_title">{{ $t("EQP_NAME") }}：</div>
                      <div class="content_text">{{ item.eqpName || "--" }}</div>
                    </div>
                    <!-- 设备编号 -->
                    <!-- <div class="content flex items-center">
                      <div class="content_title">{{ $t("EQP_CODE") }}：</div>
                      <div class="content_text">{{ item.eqpCode || "--" }}</div>
                    </div> -->
                    <!-- 持续时间 -->
                    <div class="content flex items-center">
                      <div class="content_title">
                        {{ `${$t("DOWNTIME")}${$t("DURATION")}` }}：
                      </div>
                      <div
                        class="content_text"
                        :class="item.downRedFlag === 'Y' ? 'active_color' : ''"
                      >
                        {{ item.statusDuration || item.downTimeMin }}
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="fixList.length < 1"
                  style="width: 280px; height: 200px"
                >
                  <NoData />
                </div>
              </div>
              <div v-if="curTodoIndex === '2'">
                <div
                  v-for="(item, index) in examineList"
                  :key="index"
                  class="todo_card flex flex-col"
                >
                  <div class="status_title flex items-center">
                    <div
                      class="status_name"
                      :style="{
                        backgroundColor: statusData[item.status]
                          ? statusData[item.status].color
                          : statusData['WAIT_CALL'].color,
                      }"
                    >
                      {{ item.checkStatusName }}
                    </div>
                    <div class="title">{{ item.name }}</div>
                  </div>
                  <div class="flex flex-col content_box">
                    <!-- 目标位置 -->
                    <div class="content flex items-center">
                      <div class="content_title">
                        {{ $t("TARTGET_LOCATION") }}：
                      </div>
                      <div class="content_text">
                        {{ item.toLocation || "--" }}
                      </div>
                    </div>
                    <!-- 申请时间 -->
                    <div class="content flex items-center">
                      <div class="content_title">
                        {{ $t("APPLICATION_TIME") }}：
                      </div>
                      <div class="content_text">
                        {{ item.applyTime || "--" }}
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="examineList.length < 1"
                  style="width: 280px; height: 200px"
                >
                  <NoData />
                </div>
              </div>
            </div>
          </div>
          <div
            v-if="MTList.length || PMPCList.length || saveList.length"
            class="m_box"
            :style="{
              width: `${toDoList.length ? 'calc(100% - 348px)' : '100%'}`,
            }"
          >
            <div v-if="MTList.length" class="flex">
              <a-collapse
                v-if="MTList.find((item) => item.id === '12')"
                v-model="activeA"
                expand-icon-position="right"
                class="collapse-header-divide flex-1 chart_box"
              >
                <a-collapse-panel
                  key="a"
                  :header="$t('MTBF_TRENDS')"
                  :show-arrow="false"
                  disabled
                >
                  <line-chart
                    :id="lineChartIdA"
                    :x-axis="xAxisLineA"
                    :y-axis="yAxisLineA"
                    :series="seriesLineA"
                    :grid="gridA"
                    :height="height"
                  />
                  <div v-if="xAxisLineA.data.length < 1" style="height: 200px">
                    <NoData />
                  </div>
                </a-collapse-panel>
              </a-collapse>
              <a-collapse
                v-if="MTList.find((item) => item.id === '13')"
                v-model="activeB"
                expand-icon-position="right"
                class="collapse-header-divide flex-1 chart_box"
              >
                <a-collapse-panel
                  key="b"
                  :header="$t('MTTR_TRENDS')"
                  :show-arrow="false"
                  disabled
                >
                  <line-chart
                    v-if="xAxisLineB.data.length > 0"
                    :id="lineChartIdB"
                    :x-axis="xAxisLineB"
                    :y-axis="yAxisLineB"
                    :series="seriesLineB"
                    :grid="gridA"
                    :height="height"
                  />
                  <div v-if="xAxisLineB.data.length < 1" style="height: 200px">
                    <NoData />
                  </div>
                </a-collapse-panel>
              </a-collapse>
              <a-collapse
                v-if="MTList.find((item) => item.id === '14')"
                v-model="activeC"
                expand-icon-position="right"
                class="collapse-header-divide flex-1 chart_box"
              >
                <a-collapse-panel
                  key="c"
                  :header="$t('PERSONNEL_LOADING')"
                  :show-arrow="false"
                  disabled
                >
                  <div class="flex" style="width: 100%; position: relative">
                    <div
                      v-if="hours.length"
                      id="chart3"
                      :style="{ width: '100%', height: height }"
                    ></div>
                    <div v-if="hours.length < 1" class="absolute inset-0">
                      <NoData />
                    </div>
                  </div>
                </a-collapse-panel>
              </a-collapse>
            </div>
            <div v-if="PMPCList.length" class="flex" style="margin-top: 12px">
              <a-collapse
                v-if="PMPCList.find((item) => item.id === '10')"
                v-model="activeD"
                expand-icon-position="right"
                class="collapse-header-divide flex-1 chart_box"
              >
                <a-collapse-panel
                  key="d"
                  :header="$t('CHECK_COMPLETION')"
                  :show-arrow="false"
                  disabled
                >
                  <bar-line-chart
                    :id="barChartIdD"
                    :height="height"
                    :grid="gridD"
                    :legend="legendD"
                    :series="seriesBarD"
                    :x-axis="xAxisBarD"
                    :y-axis="yAxisBarD"
                  />
                </a-collapse-panel>
              </a-collapse>
              <a-collapse
                v-if="PMPCList.find((item) => item.id === '11')"
                v-model="activeE"
                expand-icon-position="right"
                class="collapse-header-divide flex-1 chart_box"
              >
                <a-collapse-panel
                  key="e"
                  :header="$t('MAINTENANCE_COMPLETION')"
                  :show-arrow="false"
                  disabled
                >
                  <bar-line-chart
                    :id="barChartIdE"
                    :height="height"
                    :grid="gridD"
                    :legend="legendD"
                    :series="seriesBarE"
                    :x-axis="xAxisBarE"
                    :y-axis="yAxisBarE"
                  />
                </a-collapse-panel>
              </a-collapse>
            </div>
            <div
              v-if="saveList.length"
              class="flex justify-between"
              style="margin-top: 12px"
            >
              <a-collapse
                v-if="saveList.find((item) => item.id === '15')"
                v-model="activeF"
                expand-icon-position="right"
                class="collapse-header-divide flex-1 chart_box"
                style="width: 48%"
              >
                <a-collapse-panel
                  key="f"
                  :header="$t('SERVICE_LIFE_OF_SPARE_PARTS')"
                  :show-arrow="false"
                  disabled
                >
                  <div class="flex" style="overflow: hidden; overflow-x: auto">
                    <div
                      v-for="(item, index) in spartList"
                      :key="index"
                      class="flex flex-col spart_box"
                    >
                      <div class="spart_code">料号:{{ item.matCode }}</div>
                      <div class="spart_content">名称:{{ item.matName }}</div>
                      <div class="spart_content">设备:{{ item.eqpName }}</div>
                      <div class="spart_process flex items-center">
                        <div class="process_box">
                          <div
                            class="process"
                            :style="{
                              width:
                                item.remainPercent > 0
                                  ? (121 * item.remainPercent) / 100 + 'px'
                                  : '0px',
                            }"
                          ></div>
                        </div>
                        <div>{{ item.remainLife }}{{ item.unit }}</div>
                      </div>
                    </div>
                    <div
                      v-if="spartList.length < 1"
                      style="height: 200px; width: 100%"
                    >
                      <NoData />
                    </div>
                  </div>
                </a-collapse-panel>
              </a-collapse>
              <a-collapse
                v-if="saveList.find((item) => item.id === '16')"
                v-model="activeG"
                expand-icon-position="right"
                class="collapse-header-divide flex-1 chart_box"
                style="width: 48%"
              >
                <a-collapse-panel
                  key="g"
                  :header="$t('SAFETY_STOCK')"
                  :show-arrow="false"
                  disabled
                >
                  <div class="flex" style="overflow: hidden; overflow-x: auto">
                    <div
                      v-for="(item, index) in spartSaveList"
                      :key="index"
                      class="flex flex-col spart_box"
                    >
                      <div class="spart_code">料号：{{ item.matCode }}</div>
                      <div class="spart_content">名称：{{ item.matName }}</div>
                      <div class="spart_content">
                        实际库存：{{ item.actualStorage }}
                      </div>
                      <div class="spart_content">
                        安全库存：{{ item.safeStorage }}
                      </div>
                    </div>
                    <div
                      v-if="spartSaveList.length < 1"
                      style="height: 200px; width: 100%"
                    >
                      <NoData />
                    </div>
                  </div>
                </a-collapse-panel>
              </a-collapse>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import * as echarts from "echarts";
import { uniqBy } from "lodash";
import ApiConstant from "@/api/ApiConstant";
import { Icon } from "@mega-design/ui-vue";
import lineChart from "@/components/echart/lineChart/index.vue";
import barLineChart from "@/components/echart/barLineChart/index.vue";
import NoData from "@/components/epms/NoData/index.vue";

export default {
  components: {
    Icon,
    lineChart,
    barLineChart,
    NoData,
  },
  data() {
    return {
      homeId: undefined,
      quickList: [], // 对应快捷入口的列表
      toDoList: [], // 对应审批的列表
      MTList: [], // 对应MTTR的列表
      PMPCList: [], // 对应点检，保养的列表
      saveList: [], // 对应库存的列表
      activeA: "a",
      activeB: "b",
      activeC: "c",
      activeD: "d",
      activeE: "e",
      activeF: "f",
      activeG: "g",
      testJson: {
        quickList: ["1", "2", "3", "4", "5", "6", "7", "8"], // 对应快捷入口的列表
        toDoList: ["9"], // 对应审批的列表
        MTList: ["12", "13", "14"], // 对应MTTR的列表
        PMPCList: ["10", "11"], // 对应点检，保养的列表
        saveList: ["15", "16"], // 对应库存的列表
      }, // 默认JSON
      curTodoIndex: "1",
      selectList: [
        {
          name: this.$t("EQUIPMENT_LEDGER"),
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-mnf-z--shebei",
          color: "#1795CC",
          id: "1",
          isChoose: false,
          path: "/eam/account_management/equipment_account",
        }, // 设备台账
        {
          name: this.$t("EQUIPMENT_REPAIR"),
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-cur-release",
          color: "#8190F3",
          id: "2",
          isChoose: false,
          path: "/eam/repair_management/fault_repair",
        }, // 设备维修
        {
          name: this.$t("CHECK_FORM"),
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-mnf-z--dianjianbiaodan",
          color: "#006896",
          id: "3",
          isChoose: false,
          path: "/eam/eqp_check/check_form",
        }, // 点检表单
        {
          name: this.$t("CHECK_PLAN"),
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-mnf-z--dianjianjihua",
          color: "#006896",
          id: "4",
          isChoose: false,
          path: "/eam/eqp_check/check_plan",
        }, // 点检计划
        {
          name: this.$t("MAINTENANCE_FORM"),
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-mnf-z--baoyangbiaodan",
          color: "#1E80FF",
          id: "5",
          isChoose: false,
          path: "/eam/eqp_maintain/maintenance_form",
        }, // 保养表单
        {
          name: this.$t("MAINTENANCE_PLAN"),
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-mnf-z--baoyangjihua",
          color: "#1E80FF",
          id: "6",
          isChoose: false,
          path: "/eam/eqp_maintain/maintenance_plan",
        }, // 保养计划
        {
          name: this.$t("机况监控"),
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-cur-a-t-Usestatus",
          color: "#FF9041",
          id: "7",
          isChoose: false,
          path: "/eam/use_status_management/status_report",
        }, // 机况监控
        {
          name: `OEE ${this.$t("BOARD")}`,
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-data-date",
          color: "#FF9041",
          id: "8",
          isChoose: false,
          path: "/eam/use_status_management/status_report/board",
        }, // OEE看板
        {
          name: `${this.$t("EPMS_FIX")}、${this.$t("EXAMINE")}`,
          type: "D",
          typeName: this.$t("NEED_DEALT"),
          icon: "icon-cur-handle",
          color: "#FF9041",
          id: "9",
          isChoose: false,
        }, // 维修、审批
        {
          name: this.$t("CHECK_REPORT"),
          type: "M2",
          typeName: this.$t("SPOT_CHECK"),
          icon: "icon-mnf-z--dianjianzhixingbaogao",
          color: "#006896",
          id: "10",
          isChoose: false,
        }, // 点检执行报告
        {
          name: this.$t("MAINTENANCE_REPORT"),
          type: "M2",
          typeName: this.$t("PM"),
          icon: "icon-mnf-z--baoyangzhixingbaogao",
          color: "#1E80FF",
          id: "11",
          isChoose: false,
        }, // 保养执行报告
        {
          name: "MTBF",
          type: "M1",
          typeName: this.$t("EPMS_FIX"),
          icon: "icon-cur-Field-time",
          color: "#1E80FF",
          id: "12",
          isChoose: false,
        }, // MTBF
        {
          name: `MTTR By ${this.$t("EQP")}`,
          type: "M1",
          typeName: this.$t("EPMS_FIX"),
          icon: "icon-cur-end",
          color: "#8190F3",
          id: "13",
          isChoose: false,
        }, // MTTR by 设备
        {
          name: this.$t("PERSONNEL_LOADING"),
          type: "M1",
          typeName: this.$t("PERSONNEL_LOADING"),
          icon: "icon-cur-contacts",
          color: "#1E80FF",
          id: "14",
          isChoose: false,
        }, // 人员loading
        {
          name: this.$t("SERVICE_LIFE_OF_SPARE_PARTS"),
          type: "M3",
          typeName: this.$t("SPARE_PART"),
          icon: "icon-mnf-z--beijianguanli",
          color: "#FF9041",
          id: "15",
          isChoose: false,
        }, // 备件寿命
        {
          name: this.$t("SAFETY_STOCK"),
          type: "M3",
          typeName: this.$t("SAFETY_STOCK"),
          icon: "icon-mnf-z--wuliao02",
          color: "#FF9041",
          id: "16",
          isChoose: false,
        }, // 安全库存
      ],
      statusData: {
        WAIT_CALL: {
          // 待叫修
          title: this.$t("EPMS_REPAIR"),
          color: "#ff7142",
        },
        EPMS_REPAIR: {
          // 待叫修
          title: this.$t("EPMS_REPAIR"),
          color: "#ff7142",
        },
        WAIT_ASSIGN: {
          // 待派工
          title: this.$t("WAIT_DISPATCH"),
          color: "#9aa3ff",
        },
        WAIT_ACCEPT: {
          // 待接单
          title: this.$t("WAIT_ACCEPT"),
          color: "#61b6ff",
        },
        WAIT_REPAIR: {
          // 待维修
          title: this.$t("UNDER_REPAIR"),
          color: "#006896",
        },
        WAIT_CONFIRM: {
          // 待确认
          title: this.$t("WAIT_CONFIRM"),
          color: "#3db8d8",
        },
        FINISHED: {
          // 已结单
          title: this.$t("FINISHED"),
          color: "#00bf9d",
        },
        WAIT_CHECK: {
          // 待审批
          title: this.$t("FINISHED"),
          color: "#CCCCCC",
        },
        EXECUTING: {
          // 待完成 未开始
          title: this.$t("FINISHED"),
          color: "#006896",
        },
        OVERDUE: {
          // 待完成 未开始
          title: this.$t("FINISHED"),
          color: "#FF3250",
        },
        ALREADY_FINISH: {
          // 已完成
          title: this.$t("FINISHED"),
          color: "#07B985",
        },
      },
      fixList: [],
      examineList: [],
      gridA: {
        top: 10,
        left: 30,
        right: 30,
        bottom: 30,
      },
      xAxisLineA: {
        type: "category",
        data: [],
        axisTick: {
          show: false,
        },
      },
      yAxisLineA: {
        type: "value",
      },
      seriesLineA: [
        {
          name: "",
          data: [],
          type: "line",
          markLine: {
            silent: true,
            label: {
              show: false,
            },
            symbol: ["none", "none"],
            data: [],
          },
        },
      ],
      xAxisLineB: {
        type: "category",
        data: [],
        axisTick: {
          show: false,
        },
      },
      yAxisLineB: {
        type: "value",
      },
      seriesLineB: [
        {
          name: "",
          data: [],
          type: "line",
          markLine: {
            silent: true,
            label: {
              show: false,
            },
            symbol: ["none", "none"],
            data: [],
          },
        },
      ],
      legendD: {
        top: "10",
        right: "16",
        tooltip: {
          show: true,
        },
      },
      gridD: {
        top: 50,
        left: 30,
        right: 50,
        bottom: 30,
      },
      xAxisBarD: {
        type: "category",
        data: [],
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#999",
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(233, 233, 233, 1)",
            width: 1,
            type: "solid",
          },
        },
      },
      yAxisBarD: [
        {
          type: "value",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "rgba(153, 153, 153, 1)",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(233, 233, 233, .1)",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            // 分割线配置
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(153, 153, 153, .2)",
            },
          },
        },
        {
          type: "value",
          name: "完成率(%)",
          min: 0,
          max: 100,
          interval: 20,
          axisLabel: {
            formatter: "{value}%",
            textStyle: {
              color: "rgba(153, 153, 153, 1)",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(233, 233, 233, .1)",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            // 分割线配置
            show: false,
            lineStyle: {
              type: "dashed",
              color: "rgba(153, 153, 153, .2)",
            },
          },
        },
      ],
      seriesBarD: [
        {
          name: "点检任务总数",
          data: [],
          type: "bar",
          barWidth: 10, // 柱图宽度
        },
        {
          name: "已点检任务数",
          data: [],
          type: "bar",
          barWidth: 10, // 柱图宽度
          markLine: {
            silent: true,
            label: {
              show: false,
            },
            symbol: ["none", "none"],
            data: [],
          },
        },
        {
          name: "完成率",
          type: "line",
          yAxisIndex: 1,
          data: [],
          markLine: {
            silent: true,
            label: {
              show: false,
            },
            symbol: ["none", "none"],
            data: [],
          },
        },
      ],
      xAxisBarE: {
        type: "category",
        data: [],
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#999",
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(233, 233, 233, 1)",
            width: 1,
            type: "solid",
          },
        },
      },
      yAxisBarE: [
        {
          type: "value",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "rgba(153, 153, 153, 1)",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(233, 233, 233, .1)",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            // 分割线配置
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(153, 153, 153, .2)",
            },
          },
        },
        {
          type: "value",
          name: "完成率(%)",
          min: 0,
          max: 100,
          interval: 20,
          axisLabel: {
            formatter: "{value}%",
            textStyle: {
              color: "rgba(153, 153, 153, 1)",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(233, 233, 233, .1)",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            // 分割线配置
            show: false,
            lineStyle: {
              type: "dashed",
              color: "rgba(153, 153, 153, .2)",
            },
          },
        },
      ],
      seriesBarE: [
        {
          name: "保养任务总数",
          data: [],
          type: "bar",
          barWidth: 10, // 柱图宽度
        },
        {
          name: "已保养任务数",
          data: [],
          type: "bar",
          barWidth: 10, // 柱图宽度
          markLine: {
            silent: true,
            label: {
              show: false,
            },
            symbol: ["none", "none"],
            data: [],
          },
        },
        {
          name: "完成率",
          type: "line",
          yAxisIndex: 1,
          data: [],
          markLine: {
            silent: true,
            label: {
              show: false,
            },
            symbol: ["none", "none"],
            data: [],
          },
        },
      ],
      spartList: [],
      hours: [],
      spartSaveList: [],
      lineChartIdA: "lineChartIdA",
      lineChartIdB: "lineChartIdB",
      barChartIdD: "barChartIdD",
      barChartIdE: "barChartIdE",
      myChart3: null,
      height: "220px",
      reportMtbfConfig: {}, // MTBF目标线配置,
      reportMttrConfig: {}, // MTTR目标线配置,
      reportPCConfig: {}, // 点检目标线配置,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      return Promise.all([
        this.$axios.get(`${ApiConstant.PREFIX_CORE}/api/home/get-by-token`),
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/ebs/report-limit-config`,
          {
            params: {
              reportKey: "MTBF_ANALYSIS",
            },
          }
        ),
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/ebs/report-limit-config`,
          {
            params: {
              reportKey: "MTTR_EQP_ANALYSIS",
            },
          }
        ),
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/ebs/report-limit-config`,
          {
            params: {
              reportKey: "PC_ANALYSIS",
            },
          }
        ),
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/ebs/report-limit-config`,
          {
            params: {
              reportKey: "PM_ANALYSIS",
            },
          }
        ),
      ]).then(
        ([res, reportMtbfRes, reportMttrRes, reportPCRes, reportPMRes]) => {
          this.reportMtbfConfig = { ...reportMtbfRes.data.data };
          this.reportMttrConfig = { ...reportMttrRes.data.data };
          this.reportPCConfig = { ...reportPCRes.data.data };
          this.reportPMConfig = { ...reportPMRes.data.data };
          const testJson = res.data.data
            ? JSON.parse(res.data.data)
            : {
                quickList: ["1", "2", "3", "4", "5", "6", "7", "8"], // 对应快捷入口的列表
                toDoList: ["9"], // 对应审批的列表
                MTList: ["12", "13", "14"], // 对应MTTR的列表
                PMPCList: ["10", "11"], // 对应点检，保养的列表
                saveList: ["15", "16"], // 对应库存的列表
              };
          this.selectList.forEach((item) => {
            const ele = item;
            ele.isChoose = false;
            Object.keys(testJson).forEach((key) => {
              if (testJson[key].find((itemA) => itemA === item.id)) {
                ele.isChoose = true;
              }
            });
          });
          this.testJson = testJson;
          this.setShowView(testJson);
        }
      );
    },
    setShowView(testJson) {
      this.quickList = this.selectList.filter((item) =>
        testJson.quickList.includes(item.id)
      );
      this.toDoList = this.selectList.filter((item) =>
        testJson.toDoList.includes(item.id)
      );
      this.MTList = this.selectList.filter((item) =>
        testJson.MTList.includes(item.id)
      );
      this.PMPCList = this.selectList.filter((item) =>
        testJson.PMPCList.includes(item.id)
      );
      this.saveList = this.selectList.filter((item) =>
        testJson.saveList.includes(item.id)
      );
      if (this.MTList.length && this.PMPCList.length && this.saveList.length) {
        // 三个全在
        this.height = `${(window.screen.height - 106 - 164) / 2 - 220}px`;
      } else if (
        // 只存在一个
        (!this.saveList.length &&
          !this.PMPCList.length &&
          this.MTList.length) ||
        (!this.saveList.length && !this.MTList.length && this.PMPCList.length)
      ) {
        this.height = `${window.screen.height - 106 - 380}px`;
      } else {
        // 两个
        this.height = `${(window.screen.height - 106 - 164) / 2 - 130}px`;
      }
      if (this.toDoList.length) {
        this.getTodoList();
      }
      if (this.MTList.find((item) => item.id === "12")) {
        this.showChart1();
      }
      if (this.MTList.find((item) => item.id === "13")) {
        this.showChart2();
      }
      if (this.MTList.find((item) => item.id === "14")) {
        setTimeout(() => {
          this.showChart3();
        }, 1000);
      }
      if (this.PMPCList.find((item) => item.id === "10")) {
        this.showChart4();
      }
      if (this.PMPCList.find((item) => item.id === "11")) {
        this.showChart5();
      }
      if (this.saveList.find((item) => item.id === "15")) {
        this.showChart6();
      }
      if (this.saveList.find((item) => item.id === "16")) {
        this.showChart7();
      }
    },
    onChangeTo(e) {
      this.curTodoIndex = e;
    },
    onGoPath(path) {
      this.$router.push({ path });
    },
    getTodoList() {
      const params = {
        page: 1,
        size: 999999999,
        sortRule: "ASC",
        sortColumn: "updateTime",
      };
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/erm/repair-ticket/search`,
          {
            params: {
              searchType: "ALL_OPERATOR",
              ...params,
            },
          }
        ),
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/ebs/epm-check-todo/search`,
          {
            params: {
              ...params,
            },
          }
        ),
      ]).then(([fixRes, examineRes]) => {
        this.fixList = fixRes.data.data?.records || [];
        this.examineList = examineRes.data.data?.records || [];
      });
    },
    showChart1() {
      const params = {
        page: 1,
        size: 99999999,
        year: moment(new Date()).format("YYYY"),
      };
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/erm/report/down-mtbf-trend`,
          { params }
        ),
      ]).then(([downTrend]) => {
        this.xAxisLineA.data = [];
        this.seriesLineA[0].data = [];
        downTrend.data?.data.forEach((item) => {
          if (item.normMonth) {
            this.xAxisLineA.data.push(item.normMonth);
          }
          this.seriesLineA[0].data.push(item.mtbf);
        });
        if (this.reportMtbfConfig.MTBF_TREND >= 0) {
          const limitObj1 = {
            label: {
              show: true,
              position: "insideEndTop",
              color: "rgba(255, 50, 80, 1)",
              formatter: (value) => {
                return `${this.$t("DOWNTIME_TARGET_LINE")}(${
                  value.data.value
                }${this.$t("FREQUENCY")})`;
              },
            },
            yAxis: this.reportMtbfConfig.MTBF_TREND || 0,
            lineStyle: {
              color: "rgba(255, 50, 80, 1)",
            },
          };
          this.seriesLineA[0].markLine.data = [{ ...limitObj1 }];
        }
      });
    },
    showChart2() {
      const params = {
        page: 1,
        size: 99999999,
        year: moment(new Date()).format("YYYY"),
      };
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/erm/report/repair-mttr-trend`,
          { params }
        ),
      ]).then(([downTrend]) => {
        this.xAxisLineB.data = [];
        this.seriesLineB[0].data = [];
        downTrend.data?.data.forEach((item) => {
          if (item.normMonth) {
            this.xAxisLineB.data.push(item.normMonth);
          }
          this.seriesLineB[0].data.push(item.mttr);
        });
        if (this.reportMttrConfig.MTTR_EQP_TREND >= 0) {
          const limitObj = {
            label: {
              show: true,
              position: "insideEndTop",
              color: "rgba(255, 50, 80, 1)",
              formatter: (value) => {
                return `${this.$t("MTTR_TARGET_LINE")}(${value.data.value}min)`;
              },
            },
            yAxis: this.reportMttrConfig.MTTR_EQP_TREND || 0,
            lineStyle: {
              color: "rgba(255, 50, 80, 1)",
            },
          };
          this.seriesLineB[0].markLine.data = [{ ...limitObj }];
        }
      });
    },
    showChart3() {
      const params = {
        page: 1,
        size: 99999999,
        year: moment(new Date()).format("YYYY"),
        startTime: `${moment(new Date()).format("YYYY")}-01-01 00:00:00`,
        endTime: `${moment(new Date()).format("YYYY-MM-DD")} 23:59:59`,
      };
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/erm/report/person-repair-mttr-analysis/week-count`,
          { params }
        ),
      ]).then(([weekAna]) => {
        const hours = Object.keys(weekAna.data.data) || [];
        this.hours = Object.keys(weekAna.data.data) || [];
        if (this.hours.length < 1) return;
        if (this.myChart3) {
          echarts.init(document.getElementById(`chart3`)).dispose();
        }
        this.myChart3 = echarts.init(document.getElementById(`chart3`));
        let days = [];
        const data = [];
        let maxValue = 0;
        Object.keys(weekAna.data.data).forEach((item, index) => {
          days = weekAna.data.data[item].map((itemB) => itemB.dayOfWeek);
          weekAna.data.data[item].forEach((itemA, indexA) => {
            const list = [index, indexA, itemA.repairNum];
            if (maxValue < itemA.repairNum) {
              maxValue = itemA.repairNum;
            }
            data.push(list);
          });
        });
        const option2 = {
          tooltip: {
            position: "top",
          },
          grid: {
            top: 10,
            left: 40,
            right: 30,
            bottom: 30,
          },
          xAxis: {
            type: "category",
            data: hours,
            splitArea: {
              show: true,
            },
          },
          yAxis: {
            type: "category",
            data: days,
            splitArea: {
              show: true,
            },
          },
          visualMap: {
            min: 0,
            max: 12,
            color: ["#006896", "#ffffff"],
            calculable: true,
            orient: "horizontal",
            left: "center",
            bottom: "10",
            show: false,
          },
          series: [
            {
              name: "MTTR",
              type: "heatmap",
              data,
              label: {
                show: true,
                color: "#fff",
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        this.myChart3.setOption({ ...option2 });
      });
    },
    showChart4() {
      const params = {
        year: moment(new Date()).format("YYYY"),
        statisticsMethod: "MONTH",
      };
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/pcm/pc-task-analysis/finish-trend`,
          {
            params,
          }
        ),
      ]).then(([firstRes]) => {
        this.xAxisBarD.data = [];
        this.seriesBarD[0].data = [];
        this.seriesBarD[1].data = [];
        this.seriesBarD[2].data = [];
        if (firstRes.data?.data && firstRes.data?.data.length > 0) {
          firstRes.data?.data.forEach((item) => {
            if (item.timeStr) {
              this.xAxisBarD.data.push(item.timeStr);
            }
            this.seriesBarD[0].data.push(item.num);
            this.seriesBarD[1].data.push(item.operateNum);
            this.seriesBarD[2].data.push(item.rate);
          });
        }
        // 目标线配置
        if (this.reportPCConfig.PC_FINISH_NUM >= 0) {
          const limitObj = {
            label: {
              show: true,
              position: "insideEndTop",
              color: "rgba(255, 50, 80, 1)",
              formatter: (value) => {
                return `${this.$t("TASK_COMPLETION_TARGET_LINE")}(${
                  value.data.value
                }${this.$t("FREQUENCY")})`;
              },
            },
            yAxis: this.reportPCConfig.PC_FINISH_NUM || 0,
            lineStyle: {
              color: "rgba(255, 50, 80, 1)",
            },
          };
          this.seriesBarD[1].markLine.data = [{ ...limitObj }];
        }
        if (this.reportPCConfig.PC_FINISH_RATE >= 0) {
          const limitObj = {
            label: {
              show: true,
              position: "insideEndTop",
              color: "rgba(255, 146, 50, 1)",
              formatter: (value) => {
                return `${this.$t("TARGET_LINE_OF_TASK_COMPLETION_RATE")}(${
                  value.data.value
                }%)`;
              },
            },
            yAxis: this.reportPCConfig.PC_FINISH_RATE || 0,
            lineStyle: {
              color: "rgba(255, 146, 50, 1)",
            },
          };
          this.seriesBarD[2].markLine.data = [{ ...limitObj }];
        }
      });
    },
    showChart5() {
      const params = {
        year: moment(new Date()).format("YYYY"),
        statisticsMethod: "MONTH",
      };
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/pmm/pm-task-analysis/finish-trend`,
          {
            params,
          }
        ),
      ]).then(([firstRes]) => {
        this.xAxisBarE.data = [];
        this.seriesBarE[0].data = [];
        this.seriesBarE[1].data = [];
        this.seriesBarE[2].data = [];
        if (firstRes.data?.data && firstRes.data?.data.length > 0) {
          firstRes.data?.data.forEach((item) => {
            if (item.timeStr) {
              this.xAxisBarE.data.push(item.timeStr);
            }
            this.seriesBarE[0].data.push(item.num);
            this.seriesBarE[1].data.push(item.operateNum);
            this.seriesBarE[2].data.push(item.rate);
          });
        }
        // 目标线配置
        if (this.reportPMConfig.PM_FINISH_NUM >= 0) {
          const limitObj = {
            label: {
              show: true,
              position: "insideEndTop",
              color: "rgba(255, 50, 80, 1)",
              formatter: (value) => {
                return `${this.$t("TASK_COMPLETION_TARGET_LINE")}(${
                  value.data.value
                }${this.$t("FREQUENCY")})`;
              },
            },
            yAxis: this.reportPMConfig.PM_FINISH_NUM || 0,
            lineStyle: {
              color: "rgba(255, 50, 80, 1)",
            },
          };
          this.seriesBarE[1].markLine.data = [{ ...limitObj }];
        }
        if (this.reportPMConfig.PM_FINISH_RATE >= 0) {
          const limitObj = {
            label: {
              show: true,
              position: "insideEndTop",
              color: "rgba(255, 146, 50, 1)",
              formatter: (value) => {
                return `${this.$t("TARGET_LINE_OF_TASK_COMPLETION_RATE")}(${
                  value.data.value
                }%)`;
              },
            },
            yAxis: this.reportPMConfig.PM_FINISH_RATE || 0,
            lineStyle: {
              color: "rgba(255, 146, 50, 1)",
            },
          };
          this.seriesBarE[2].markLine.data = [{ ...limitObj }];
        }
      });
    },
    showChart6() {
      const params = {
        page: 1,
        size: 99999999,
      };
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/prt/manage-screen/search-life-monitor`,
          {
            params,
          }
        ), // 备件寿命监控
      ]).then(([lifeMonitorRes]) => {
        if (
          lifeMonitorRes.data?.data?.records &&
          lifeMonitorRes.data?.data?.records.length > 0
        ) {
          // eslint-disable-next-line no-unsafe-optional-chaining
          this.spartList = [...lifeMonitorRes.data?.data?.records];
        }
      });
    },
    showChart7() {
      const params = {
        page: 1,
        size: 99999999,
      };
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/prt/manage-screen/search-safe-warn`,
          {
            params,
          }
        ), // 安全库存预警
      ]).then(([safeWarnRes]) => {
        if (
          safeWarnRes.data?.data?.records &&
          safeWarnRes.data?.data?.records.length > 0
        ) {
          // eslint-disable-next-line no-unsafe-optional-chaining
          this.spartSaveList = [...safeWarnRes.data?.data?.records];
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.home_box {
  background: rgba(239, 241, 244);
}
.left_box {
  padding: 22px 24px;
  width: 328px;
  height: calc(100vh - 106px);
  border-right: solid 2px #eff2f4;
  overflow-y: auto;
}
.right_box {
  // padding: 22px 24px;
}
.bottom_box {
  margin-top: 12px;
  border-top: solid 2px #eef1f4;
  height: calc(100vh - 194px);
}
.left_title {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  margin-bottom: 20px;
  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 1em;
    vertical-align: -0.125em;
    margin-right: 12px;
    background: linear-gradient(180deg, rgba(0, 80, 135, 0.65), #005087);
  }
}
.select_title {
  flex: 0 0 auto;
  margin-right: 5px;
}
.select_box {
  width: 232px;
  padding: 20px;
  background: #f4f7f9;
  border: 1px solid #e8e8e8;
  margin-bottom: 20px;
  .select_icon {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    margin-left: 20px;
    margin-right: 10px;
  }
  .select_name {
    font-size: 16px;
    color: #333;
  }
  .select_type {
    font-size: 14px;
    color: #999;
  }
}
.quick_box {
  .quick_card {
    width: 145px;
    height: 76px;
    background: #fff;
    border-radius: 2px;
    line-height: 76px;
    text-align: center;
    position: relative;
    margin-right: 24px;
  }
}
.close {
  position: absolute;
  right: -7px;
  top: -7px;
}
.todo_title {
  height: 52px;
  border-bottom: solid 1px #eef1f4;
  padding: 0 24px;
  .todo_more {
    font-size: 16px;
    color: #006896;
  }
}
.todo_box {
  position: relative;
  height: 100%;
  margin-right: 12px;
  background: #fff;
}
.todo_card_box {
  padding: 16px 24px;
  overflow: hidden;
  height: calc(100% - 32px);
  overflow-y: auto;
  .todo_tabs_box {
    width: 195px;
    height: 36px;
    background: #f2f3f5;
    border-radius: 2px;
    padding: 4px;
    .todo_tabs {
      width: 94px;
      height: 28px;
      text-align: center;
      line-height: 28px;
      background: none;
      color: #666;
    }
    .active_tab {
      background: #fff;
      color: #036690;
    }
  }
  .todo_card {
    width: 292px;
    height: 90px;
    background: #f4f7f9;
    border: 1px solid #e8e8e8;
    padding: 12px;
    margin-top: 12px;
  }
}
.status_title {
  width: 100%;
  min-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  .status_name {
    color: #ffffff;
    margin-right: 6px;
    padding: 3px 7px;
    background: #07b985;
    border-radius: 6px;
    font-size: 12px;
  }

  .title {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
  }
}

.content {
  margin-top: 6px;
  font-size: 12px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  .content_title {
    color: #999;
  }

  .content_text {
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .active_color {
    color: #ff0404;
  }
}
.app .collapse-header-divide {
  margin-top: 0px;
  border-top: none;
  background: #fff;
}
.collapse-header-divide + .collapse-header-divide {
  margin-left: 12px;
}
.spart_box {
  width: 177px;
  flex: 0 0 177px;
  height: 118px;
  padding: 12px;
  background: #f4f7f9;
  margin-right: 12px;
  .spart_code {
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  .spart_content {
    font-size: 14px;
    color: #666;
  }
  .process_box {
    width: 121px;
    height: 16px;
    background: #d3dee5;
    border-radius: 4px;
    position: relative;
    margin-right: 5px;
    .process {
      position: absolute;
      height: 16px;
      left: 0;
      top: 0;
      background: #005583;
      border-radius: 4px;
    }
  }
}
/deep/ .ant-collapse-content {
  padding: 12px;
}
/deep/ .ant-collapse-header {
  color: #333 !important;
  border-bottom: solid 1px #eef1f4 !important;
  border-radius: 0 !important;
}
</style>
