<template>
  <div
    class="page-wrapper page-tabs flex-wrap-reverseapp_container"
    :class="isPreview ? 'page-wrapper1' : ''"
  >
    <div class="page-container flex">
      <!-- 左侧组件列表 -->
      <div v-if="!isPreview" class="left_box">
        <div class="flex flex-col">
          <div class="left_title">{{ $t("COMPONENT") }}</div>
          <div class="flex items-center" style="margin-bottom: 20px">
            <div class="select_title">{{ $t("DOC_MODULE") }}:</div>
            <a-select
              key="assetsStatus"
              v-model="homeId"
              show-clear
              filter-option
              option-filter-prop="label"
              mode="multiple"
              style="width: 100%"
              :placeholder="$t('PLACESELECT')"
              @change="onChangeHome"
            >
              <a-select-option
                v-for="item in selectList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </div>
          <div class="flex flex-col">
            <div
              v-for="(item, index) in nselectList"
              :key="index"
              class="select_box flex items-center"
            >
              <a-checkbox
                v-model="item.isChoose"
                @change="onChangeCheck"
              ></a-checkbox>
              <div
                class="select_icon flex items-center justify-center"
                :style="{ background: item.color }"
              >
                <Icon :type="item.icon" :size="18" style="color: #fff" />
              </div>
              <div class="flex flex-col">
                <div class="select_name">{{ item.name }}</div>
                <div class="select_type">{{ item.typeName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧产线设备列表 -->
      <div
        class="right_box"
        :class="isPreview ? 'right_box1' : ''"
        style="width: 100%; overflow-y: auto"
      >
        <div v-if="!isPreview" class="left_title">{{ $t("PAGE") }}</div>
        <div
          v-if="!isPreview"
          class="flex items-center"
          style="margin-bottom: 20px"
        >
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            style="width: 100%"
          >
            <a-row :gutter="24" type="flex">
              <a-col :span="8">
                <a-form-model-item
                  :label="$t('HOME_PAGE') + $t('NAME')"
                  prop="homeName"
                >
                  <a-input
                    v-model="form.homeName"
                    :placeholder="$t('PLACEENTER')"
                    @change="form.homeName = form.homeName.slice(0, 50).trim()"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="16">
                <a-form-model-item :label="$t('SELECT_ROLE')" prop="roleIdList">
                  <SelectSearch
                    :show-multiple="true"
                    request-api="/api/home/role-search"
                    option-label="roleName"
                    query-list-key="roleName"
                    style="width: 100%"
                    :default-selected-keys="roleId"
                    :default-selected-names="roleName"
                    @change="onSelectSearchChange"
                  >
                  </SelectSearch>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
        <div v-if="quickList.length" class="quick_box flex">
          <div
            v-for="(item, index) in quickList"
            :key="index"
            class="quick_card"
            :class="isPreview ? 'quick_card1' : ''"
          >
            <div class="quick_name">{{ item.name }}</div>
            <Icon
              v-if="!isPreview"
              class="close cursor-pointer"
              type="icon-ins-close-circle"
              :size="14"
              @click="onHideView(item.id)"
            />
          </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">
                {{ $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
                class="flex flex-wrap"
                :class="{
                  'flex-col':
                    MTList.length || PMPCList.length || saveList.length,
                }"
                style="overflow: hidden"
              >
                <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
                      v-if="item.redFlag === 'Y' && status == 'WAIT_REPAIR'"
                      class="status_name"
                      :style="{ backgroundColor: '#ff3250' }"
                    >
                      {{ `${$t("EPMS_FIX")}${$t("EPMS_NO_PASS")}` }}
                    </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>
            </div>
            <Icon
              v-if="!isPreview"
              class="close cursor-pointer"
              type="icon-ins-close-circle"
              :size="14"
              @click="onHideView('9')"
            />
          </div>
          <div
            v-if="MTList.length || PMPCList.length || saveList.length"
            id="m_box"
            class="m_box"
            :style="{
              width: `calc(100% - ${
                toDoList.length ? (!isPreview ? '325px' : '348px') : '0px'
              })`,
            }"
          >
            <div
              v-if="MTList.length"
              class="flex"
              style="width: calc(100% - 10px)"
            >
              <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"
                  />
                  <Icon
                    v-if="!isPreview"
                    class="close cursor-pointer"
                    type="icon-ins-close-circle"
                    :size="14"
                    @click="onHideView('12')"
                  />
                </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"
                  />
                  <Icon
                    v-if="!isPreview"
                    class="close cursor-pointer"
                    type="icon-ins-close-circle"
                    :size="14"
                    @click="onHideView('13')"
                  />
                </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: chart_width }">
                    <div
                      :id="`chart3`"
                      :style="{ width: chart_width, height: height }"
                    ></div>
                  </div>
                  <Icon
                    v-if="!isPreview"
                    class="close cursor-pointer"
                    type="icon-ins-close-circle"
                    :size="14"
                    @click="onHideView('14')"
                  />
                </a-collapse-panel>
              </a-collapse>
            </div>
            <div
              v-if="PMPCList.length"
              class="flex"
              style="margin-top: 12px; width: calc(100% - 15px)"
            >
              <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"
                  />
                  <Icon
                    v-if="!isPreview"
                    class="close cursor-pointer"
                    type="icon-ins-close-circle"
                    :size="14"
                    @click="onHideView('10')"
                  />
                </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"
                  />
                  <Icon
                    v-if="!isPreview"
                    class="close cursor-pointer"
                    type="icon-ins-close-circle"
                    :size="14"
                    @click="onHideView('11')"
                  />
                </a-collapse-panel>
              </a-collapse>
            </div>
            <div
              v-if="saveList.length"
              class="flex justify-between"
              style="margin-top: 12px; width: calc(100% - 10px)"
            >
              <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%; margin-right: 10px"
              >
                <a-collapse-panel
                  key="f"
                  :header="$t('SERVICE_LIFE_OF_SPARE_PARTS')"
                  :show-arrow="false"
                  disabled
                >
                  <div class="flex" style="overflow: hidden">
                    <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>
                  <Icon
                    v-if="!isPreview"
                    class="close cursor-pointer"
                    type="icon-ins-close-circle"
                    :size="14"
                    @click="onHideView('15')"
                  />
                </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">
                    <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>
                  <Icon
                    v-if="!isPreview"
                    class="close cursor-pointer"
                    type="icon-ins-close-circle"
                    :size="14"
                    @click="onHideView('16')"
                  />
                </a-collapse-panel>
              </a-collapse>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-bottom-op">
      <a-button v-if="!isPreview" type="primary" @click="showPreview">
        <i class="iconfont icon-baocun"></i>
        {{ $t("PREVIEW") }}
      </a-button>
      <a-button
        v-if="!isPreview"
        :loading="confirmLoading"
        type="primary"
        @click="confirm"
      >
        <i class="iconfont icon-baocun"></i>
        {{ $t("SAVE") }}
      </a-button>
      <a-button @click="cancel">
        <i class="iconfont icon-quxiao"></i>
        {{ $t("CANCEL") }}
      </a-button>
    </div>
  </div>
</template>
<script>
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 SelectSearch from "@/components/epms/SelectSearch";

export default {
  components: {
    Icon,
    lineChart,
    barLineChart,
    SelectSearch,
  },
  data() {
    return {
      isPreview: false,
      confirmLoading: false,
      homeId: undefined,
      quickList: [], // 对应快捷入口的列表
      toDoList: [], // 对应审批的列表
      MTList: [], // 对应MTTR的列表
      PMPCList: [], // 对应点检，保养的列表
      saveList: [], // 对应库存的列表
      form: {
        roleIdList: [],
        homeName: "",
      },
      roleId: "",
      roleName: "",
      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",
      nselectList: [],
      selectList: [
        {
          name: this.$t("EQUIPMENT_LEDGER"),
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-mnf-z--shebei",
          color: "#1795CC",
          id: "1",
          isChoose: true,
        }, // 设备台账
        {
          name: this.$t("EQUIPMENT_REPAIR"),
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-cur-release",
          color: "#8190F3",
          id: "2",
          isChoose: true,
        }, // 设备维修
        {
          name: this.$t("CHECK_FORM"),
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-mnf-z--dianjianbiaodan",
          color: "#006896",
          id: "3",
          isChoose: true,
        }, // 点检表单
        {
          name: this.$t("CHECK_PLAN"),
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-mnf-z--dianjianjihua",
          color: "#006896",
          id: "4",
          isChoose: true,
        }, // 点检计划
        {
          name: this.$t("MAINTENANCE_FORM"),
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-mnf-z--baoyangbiaodan",
          color: "#1E80FF",
          id: "5",
          isChoose: true,
        }, // 保养表单
        {
          name: this.$t("MAINTENANCE_PLAN"),
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-mnf-z--baoyangjihua",
          color: "#1E80FF",
          id: "6",
          isChoose: true,
        }, // 保养计划
        {
          name: this.$t("机况监控"),
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-cur-a-t-Usestatus",
          color: "#FF9041",
          id: "7",
          isChoose: true,
        }, // 机况监控
        {
          name: `OEE ${this.$t("BOARD")}`,
          type: "Q",
          typeName: this.$t("QUICK_ENTRY"),
          icon: "icon-data-date",
          color: "#FF9041",
          id: "8",
          isChoose: true,
        }, // 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: true,
        }, // 维修、审批
        {
          name: this.$t("CHECK_REPORT"),
          type: "M2",
          typeName: this.$t("SPOT_CHECK"),
          icon: "icon-mnf-z--dianjianzhixingbaogao",
          color: "#006896",
          id: "10",
          isChoose: true,
        }, // 点检执行报告
        {
          name: this.$t("MAINTENANCE_REPORT"),
          type: "M2",
          typeName: this.$t("PM"),
          icon: "icon-mnf-z--baoyangzhixingbaogao",
          color: "#1E80FF",
          id: "11",
          isChoose: true,
        }, // 保养执行报告
        {
          name: "MTBF",
          type: "M1",
          typeName: this.$t("EPMS_FIX"),
          icon: "icon-cur-Field-time",
          color: "#1E80FF",
          id: "12",
          isChoose: true,
        }, // MTBF
        {
          name: `MTTR By ${this.$t("EQP")}`,
          type: "M1",
          typeName: this.$t("EPMS_FIX"),
          icon: "icon-cur-end",
          color: "#8190F3",
          id: "13",
          isChoose: true,
        }, // MTTR by 设备
        {
          name: this.$t("PERSONNEL_LOADING"),
          type: "M1",
          typeName: this.$t("PERSONNEL_LOADING"),
          icon: "icon-cur-contacts",
          color: "#1E80FF",
          id: "14",
          isChoose: true,
        }, // 人员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: true,
        }, // 备件寿命
        {
          name: this.$t("SAFETY_STOCK"),
          type: "M3",
          typeName: this.$t("SAFETY_STOCK"),
          icon: "icon-mnf-z--wuliao02",
          color: "#FF9041",
          id: "16",
          isChoose: true,
        }, // 安全库存
      ],
      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",
        },
      },
      fixList: [],
      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: [],
          },
        },
      ],
      roleList: [],
      spartList: [],
      hours: [],
      lineChartIdA: "lineChartIdA",
      lineChartIdB: "lineChartIdB",
      barChartIdD: "barChartIdD",
      barChartIdE: "barChartIdE",
      myChart3: null,
      height: "220px",
      chart_width: "100%",
      chartdate: "3",
    };
  },
  computed: {
    rules() {
      return {
        roleIdList: [
          {
            required: true,
            message: this.$t("PLACESELECT"),
            trigger: "change",
          },
        ],
      };
    },
  },
  mounted() {
    const { id } = this.$route.query;
    if (id) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/home/get-by-id/${id}`)
        .then((detailRes) => {
          this.form = detailRes.data?.data || {};
          this.form = detailRes.data?.data || {};
          if (this.form.roleList && this.form.roleList.length) {
            this.roleId = this.form.roleList.map((item) => item.key).join();
            this.roleName = this.form.roleList.map((item) => item.value).join();
            this.form.roleIdList = this.form.roleList.map((item) => item.key);
          }
          const testJson = this.form.jsonText
            ? JSON.parse(this.form.jsonText)
            : {
                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);
        });
    } else {
      const testJson = this.form.jsonText
        ? JSON.parse(this.form.jsonText)
        : {
            quickList: ["1", "2", "3", "4", "5", "6", "7", "8"], // 对应快捷入口的列表
            toDoList: ["9"], // 对应审批的列表
            MTList: ["12", "13", "14"], // 对应MTTR的列表
            PMPCList: ["10", "11"], // 对应点检，保养的列表
            saveList: ["15", "16"], // 对应库存的列表
          };
      this.testJson = testJson;
      this.setShowView(testJson);
    }
    this.nselectList = [...this.selectList];
    this.init();
  },
  methods: {
    init() {
      return Promise.all([
        this.$axios.get(`${ApiConstant.PREFIX_CORE}/api/sys/role/list`, {
          params: {
            enableFlag: "Y",
          },
        }),
      ]).then(([roleRes]) => {
        this.roleList = roleRes.data.data;
      });
    },
    setShowView(testJson) {
      this.fixList = [
        {
          eqpCode: "TEST00000001",
          eqpName: "这是一个测试设备",
          location: "A01车间-A01COG-A01COG002",
          redFlag: "N",
          repairDuration: "27min37s",
          status: "WAIT_CALL",
          statusDuration: "32min29s",
          statusStartTime: "2022-03-09 17:19:34",
        },
        {
          eqpCode: "TEST00000001",
          eqpName: "这是一个测试设备",
          location: "A01车间-A01COG-A01COG002",
          redFlag: "N",
          repairDuration: "27min37s",
          status: "FINISHED",
          statusDuration: "32min29s",
          statusStartTime: "2022-03-09 17:19:34",
        },
        {
          eqpCode: "TEST00000001",
          eqpName: "这是一个测试设备",
          location: "A01车间-A01COG-A01COG002",
          redFlag: "N",
          repairDuration: "27min37s",
          status: "WAIT_REPAIR",
          statusDuration: "32min29s",
          statusStartTime: "2022-03-09 17:19:34",
        },
        {
          eqpCode: "TEST00000001",
          eqpName: "这是一个测试设备",
          location: "A01车间-A01COG-A01COG002",
          redFlag: "N",
          repairDuration: "27min37s",
          status: "WAIT_ASSIGN",
          statusDuration: "32min29s",
          statusStartTime: "2022-03-09 17:19:34",
        },
        {
          eqpCode: "TEST00000001",
          eqpName: "这是一个测试设备",
          location: "A01车间-A01COG-A01COG002",
          redFlag: "N",
          repairDuration: "27min37s",
          status: "WAIT_ACCEPT",
          statusDuration: "32min29s",
          statusStartTime: "2022-03-09 17:19:34",
        },
        {
          eqpCode: "TEST00000001",
          eqpName: "这是一个测试设备",
          location: "A01车间-A01COG-A01COG002",
          redFlag: "N",
          repairDuration: "27min37s",
          status: "WAIT_ACCEPT",
          statusDuration: "32min29s",
          statusStartTime: "2022-03-09 17:19:34",
        },
        {
          eqpCode: "TEST00000001",
          eqpName: "这是一个测试设备",
          location: "A01车间-A01COG-A01COG002",
          redFlag: "N",
          repairDuration: "27min37s",
          status: "WAIT_ACCEPT",
          statusDuration: "32min29s",
          statusStartTime: "2022-03-09 17:19:34",
        },
      ];
      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`;
      }
      this.showChart1();
      this.showChart2();
      setTimeout(() => {
        const mBox = document.getElementById("m_box");
        this.chartdate = new Date().getTime();
        this.chart_width = `${
          mBox.offsetWidth / testJson.MTList.length - 10
        }px`;
      }, 500);
      setTimeout(() => {
        this.showChart3();
      }, 1000);
      this.showChart4();
      this.showChart5();
      this.showChart6();
      this.showChart7();
    },
    onChangeCheck(e) {
      const testJson = {
        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) => {
        if (!item.isChoose) {
          Object.keys(testJson).forEach((key) => {
            testJson[key].forEach((itemA, index) => {
              if (itemA === item.id) {
                testJson[key].splice(index, 1);
              }
            });
          });
        }
      });
      this.testJson = testJson;
      this.setShowView(testJson);
    },
    onHideView(id) {
      const arr = [...this.selectList];
      arr.forEach((item) => {
        const ele = item;
        if (item.id === id) {
          ele.isChoose = false;
        }
      });
      this.selectList = [...arr];
      this.onChangeCheck();
    },
    onChangeHome(e) {
      if (!e || !e.length) {
        this.nselectList = [...this.selectList];
      } else {
        this.nselectList = this.selectList.filter((item) =>
          e.includes(item.id)
        );
      }
    },
    onChangeTo(e) {
      this.curTodoIndex = e;
    },
    onSelectSearchChange(e, info) {
      this.form.roleIdList = info;
      this.roleId = info.join();
      this.roleName = e.join();
    },
    showChart1() {
      this.xAxisLineA.data = [
        "2022-09-10",
        "2022-09-11",
        "2022-09-12",
        "2022-09-13",
        "2022-09-14",
        "2022-09-15",
        "2022-09-16",
      ];
      this.seriesLineA[0].data = [10, 80, 60, 75, 50, 65, 90];
    },
    showChart2() {
      this.xAxisLineB.data = [
        "2022-09-10",
        "2022-09-11",
        "2022-09-12",
        "2022-09-13",
        "2022-09-14",
        "2022-09-15",
        "2022-09-16",
      ];
      this.seriesLineB[0].data = [10, 80, 60, 75, 50, 65, 90];
    },
    showChart3() {
      if (this.myChart3) {
        echarts.init(document.getElementById(`chart3`)).dispose();
      }
      this.myChart3 = echarts.init(document.getElementById(`chart3`));
      const hours = [
        "人员1",
        "人员2",
        "人员3",
        "人员4",
        "人员5",
        "人员6",
        "人员7",
        "人员8",
      ];
      this.hours = hours;
      const days = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      const data = [];
      for (let index = 0; index < hours.length; index += 1) {
        for (let i = 0; i < days.length; i += 1) {
          const ranNum = parseInt(Math.random() * 12, 10);
          data.push([index, i, ranNum]);
        }
      }
      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() {
      this.xAxisBarD.data = [
        "2022-09-05",
        "2022-09-06",
        "2022-09-07",
        "2022-09-08",
        "2022-09-09",
        "2022-09-10",
        "2022-09-11",
        "2022-09-12",
        "2022-09-13",
        "2022-09-14",
        "2022-09-15",
        "2022-09-16",
      ];
      this.seriesBarD[0].data = [
        10, 80, 60, 75, 50, 65, 90, 20, 15, 70, 40, 55,
      ];
      this.seriesBarD[1].data = [
        10, 80, 60, 75, 50, 65, 90, 20, 15, 70, 40, 55,
      ];
      this.seriesBarD[2].data = [
        10, 80, 60, 75, 50, 65, 90, 20, 15, 70, 40, 55,
      ];
    },
    showChart5() {
      this.xAxisBarE.data = [
        "2022-09-05",
        "2022-09-06",
        "2022-09-07",
        "2022-09-08",
        "2022-09-09",
        "2022-09-10",
        "2022-09-11",
        "2022-09-12",
        "2022-09-13",
        "2022-09-14",
        "2022-09-15",
        "2022-09-16",
      ];
      this.seriesBarE[0].data = [
        10, 80, 60, 75, 50, 65, 90, 20, 15, 70, 40, 55,
      ];
      this.seriesBarE[1].data = [
        10, 80, 60, 75, 50, 65, 90, 20, 15, 70, 40, 55,
      ];
      this.seriesBarE[2].data = [
        10, 80, 60, 75, 50, 65, 90, 20, 15, 70, 40, 55,
      ];
    },
    showChart6() {
      this.spartList = [
        {
          eqpName: "海涛的设备001",
          matCode: "D00002",
          matName: "计数器",
          remainLife: 0,
          remainPercent: 10,
          unit: "h",
        },
        {
          eqpName: "海涛的设备001",
          matCode: "D00002",
          matName: "计数器",
          remainLife: 0,
          remainPercent: 60,
          unit: "h",
        },
        {
          eqpName: "海涛的设备001",
          matCode: "D00002",
          matName: "计数器",
          remainLife: 0,
          remainPercent: 15,
          unit: "h",
        },
        {
          eqpName: "海涛的设备001",
          matCode: "D00002",
          matName: "计数器",
          remainLife: 0,
          remainPercent: 80,
          unit: "h",
        },
        {
          eqpName: "海涛的设备001",
          matCode: "D00002",
          matName: "计数器",
          remainLife: 0,
          remainPercent: 70,
          unit: "h",
        },
        {
          eqpName: "海涛的设备001",
          matCode: "D00002",
          matName: "计数器",
          remainLife: 0,
          remainPercent: 55,
          unit: "h",
        },
        {
          eqpName: "海涛的设备001",
          matCode: "D00002",
          matName: "计数器",
          remainLife: 0,
          remainPercent: 30,
          unit: "h",
        },
        {
          eqpName: "海涛的设备001",
          matCode: "D00002",
          matName: "计数器",
          remainLife: 0,
          remainPercent: 90,
          unit: "h",
        },
        {
          eqpName: "海涛的设备001",
          matCode: "D00002",
          matName: "计数器",
          remainLife: 0,
          remainPercent: 100,
          unit: "h",
        },
      ];
    },
    showChart7() {
      this.spartSaveList = [
        {
          matCode: "D00002",
          matName: "计数器",
          actualStorage: 0,
          safeStorage: 20,
        },
        {
          matCode: "D00002",
          matName: "计数器",
          actualStorage: 0,
          safeStorage: 20,
        },
        {
          matCode: "D00002",
          matName: "计数器",
          actualStorage: 0,
          safeStorage: 20,
        },
        {
          matCode: "D00002",
          matName: "计数器",
          actualStorage: 0,
          safeStorage: 20,
        },
        {
          matCode: "D00002",
          matName: "计数器",
          actualStorage: 0,
          safeStorage: 20,
        },
        {
          matCode: "D00002",
          matName: "计数器",
          actualStorage: 0,
          safeStorage: 20,
        },
        {
          matCode: "D00002",
          matName: "计数器",
          actualStorage: 0,
          safeStorage: 20,
        },
        {
          matCode: "D00002",
          matName: "计数器",
          actualStorage: 0,
          safeStorage: 20,
        },
        {
          matCode: "D00002",
          matName: "计数器",
          actualStorage: 0,
          safeStorage: 20,
        },
      ];
    },
    showPreview() {
      this.isPreview = true;
      this.setShowView(this.testJson);
    },
    confirm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          this.$axios
            .post(`${ApiConstant.PREFIX_CORE}/api/home`, {
              homeName: this.form.homeName,
              roleIdList: this.form.roleIdList,
              jsonText: JSON.stringify(this.testJson),
            })
            .then((res) => {
              this.$message.success(this.$t("ADD_SUCCESS"));
              this.confirmLoading = false;
              this.cancel();
            })
            .catch(() => (this.confirmLoading = false));
        }
      });
    },
    cancel() {
      if (this.isPreview) {
        this.isPreview = false;
        return;
      }
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/eam/home/editIndex" },
        vm: this,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.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: 20px;
  border-top: solid 2px #eef1f4;
  height: calc(100vh - 300px);
}
.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;
    border-radius: 2px;
    line-height: 76px;
    text-align: center;
    position: relative;
    background: rgba(0, 85, 131, 0.1);
    border: 1px solid rgba(0, 85, 131, 0.3);
    margin-right: 24px;
  }
  .quick_card1 {
    background: #fff;
    border: none;
  }
}
.close {
  position: absolute;
  right: -7px;
  top: -7px;
}
.todo_title {
  height: 52px;
  border-bottom: solid 1px #eef1f4;
  .todo_more {
    font-size: 16px;
    color: #006896;
  }
}
.todo_box {
  position: relative;
  height: 100%;
  margin-right: 12px;
}
.todo_card_box {
  padding: 16px 0px;
  overflow: hidden;
  height: calc(100% - 32px);
  .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: 320px;
    height: 90px;
    background: #f4f7f9;
    border: 1px solid #e8e8e8;
    padding: 12px;
    margin-top: 12px;
    margin-right: 12px;
  }
}
.status_title {
  width: 100%;
  min-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

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

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

.content {
  margin-top: 6px;
  font-size: 12px;
  color: #666;
  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;
}
.page-wrapper1 {
  .page-container {
    padding-bottom: 0;
  }
}
.right_box1 {
  padding: 0;
  background: rgba(239, 241, 244);
  .todo_box {
    background: #fff;
    .todo_title {
      padding: 0 24px;
    }
    .todo_card_box {
      padding: 16px 24px;
      .todo_card {
        width: 280px;
      }
    }
  }
  /deep/ .ant-collapse-content {
    padding: 12px;
  }
  /deep/ .ant-collapse-header {
    color: #333 !important;
    border-bottom: solid 1px #eef1f4 !important;
    border-radius: 0 !important;
  }
  .collapse-header-divide {
    margin-top: 0px;
    border-top: none;
    background: #fff;
  }
  .collapse-header-divide + .collapse-header-divide {
    margin-left: 12px;
  }
  .bottom_box {
    margin-top: 12px;
    border-top: solid 2px #eef1f4;
    height: calc(100vh - 194px);
  }
}
.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;
    }
  }
}
.chart_box {
  position: relative;
}
.bottom {
  width: 100%;
  height: 61px;
}
/deep/ .ant-collapse-content {
  padding: 0;
}
</style>
