<template>
  <div class="dashbord">
    <div class="chart-group">
      <el-card style="margin-right: 2px">
        <SubTitle title="设备运行" />
        <div class="chart-content">
          <img class="positionImg" src="@/assets/images/position.png" alt="" />
        </div>
      </el-card>
      <div class="chart-two" style="padding-left: 4px">
        <el-card>
          <SubTitle title="设备总览" />
          <div class="chart-content">
            <BaseChart width="100%" height="100%" :option="equipOption" />
          </div>
        </el-card>
        <el-card>
          <SubTitle title="告警处理" />
          <div class="chart-content">
            <el-table class="warningTable" :data="warningData" border style="margin-top: 10px" max-height="300">
              <el-table-column prop="deviceNo" align="center" label="设备编号" />
              <el-table-column prop="warningDate" align="center" width="100" label="告警时间" />
              <el-table-column prop="warningType" align="center" label="告警类型" />
              <el-table-column label="操作" align="center" fixed="right" width="70">
                <template #default="scope">
                  <div class="warnBtns">
                    <el-button link size="small" type="primary" text>详情</el-button>
                    <el-button link size="small" type="danger" text>处理</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
    <div class="chart-group">
      <div class="chart-two">
        <el-card>
          <SubTitle title="巡检人员" />
          <div class="chart-content">
            <div class="check-summary">
              <div>
                <img src="@/assets/images/home/banzu.svg" alt="" />
                <div class="check-name">
                  <div>8</div>
                  <div>班组</div>
                </div>
              </div>
              <div>
                <img src="@/assets/images/home/person.svg" alt="" />
                <div class="check-name">
                  <div>40</div>
                  <div>巡检人员</div>
                </div>
              </div>
            </div>
            <div class="check-rank">
              <div>当月巡检排名</div>
              <CustomTabs v-model:active="checkActive" :tabs="checkTabs" />
            </div>
            <el-table :data="tableData" style="width: 100%; margin-top: 10px" max-height="200">
              <el-table-column prop="name" label="巡检员">
                <template #default="scope">
                  {{ `${scope.$index + 1}、${scope.row.name}` }}
                </template>
              </el-table-column>

              <el-table-column prop="group" label="所在班组" />
              <el-table-column prop="num" label="数量" />
            </el-table>
          </div>
        </el-card>
        <el-card>
          <SubTitle title="售后工程师" />
          <div class="chart-content">
            <div class="check-summary">
              <div>
                <img src="@/assets/images/home/banzu.svg" alt="" />
                <div class="check-name">
                  <div>16</div>
                  <div>供应商</div>
                </div>
              </div>
              <div>
                <img src="@/assets/images/home/person.svg" alt="" />
                <div class="check-name">
                  <div>62</div>
                  <div>售后工程师</div>
                </div>
              </div>
            </div>
            <div class="check-rank">
              <div>累计故障处理</div>
              <CustomTabs v-model:active="serviceActive" :tabs="serviceTabs" />
            </div>
            <el-table :data="serviceData" style="width: 100%; margin-top: 10px" max-height="200">
              <el-table-column prop="name" label="售后工程师">
                <template #default="scope">
                  {{ `${scope.$index + 1}、${scope.row.name}` }}
                </template>
              </el-table-column>

              <el-table-column prop="group" label="所属供应商" />
              <el-table-column prop="num" label="工单完成率" />
            </el-table>
          </div>
        </el-card>
      </div>
      <el-card>
        <SubTitle title="运营数据" />
        <div class="chart-content">
          <BaseChart width="100%" height="50%" :option="checkOption" />
          <BaseChart width="100%" height="50%" :option="lineOption" />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import CustomTabs from './components/CustomTabs.vue';
const checkTabs = [
  {
    name: '按巡检设备数',
    value: '1'
  },
  {
    name: '按发现故障数',
    value: '2'
  }
];
const serviceTabs = [
  {
    name: '按完成率',
    value: '1'
  },
  {
    name: '按专业度',
    value: '2'
  },
  {
    name: '按服务态度',
    value: '3'
  }
];
const checkActive = ref('1');
const serviceActive = ref('1');
const tableData = [
  {
    name: '王刚',
    group: '班组4',
    num: '123'
  },
  {
    name: '李思',
    group: '班组2',
    num: '88'
  },
  {
    name: '张伟',
    group: '班组3',
    num: '65'
  },
  {
    name: '张强',
    group: '班组1',
    num: '54'
  }
];
const serviceData = [
  {
    name: '王伟',
    group: '供应商3',
    num: '100%'
  },
  {
    name: '李成',
    group: '供应商2',
    num: '88%'
  },
  {
    name: '张雷',
    group: '供应商1',
    num: '65%'
  },
  {
    name: '刘飞',
    group: '供应商4',
    num: '54%'
  }
];
const warningData = [
  {
    deviceNo: 'No12332',
    warningDate: '2024-10-30 11:45:00',
    warningType: '故障告警'
  },
  {
    deviceNo: 'No125',
    warningDate: '2024-10-30 11:25:00',
    warningType: '离线告警'
  },
  {
    deviceNo: 'No1282',
    warningDate: '2024-10-30 10:45:00',
    warningType: '故障告警'
  },
  {
    deviceNo: 'No1236',
    warningDate: '2024-10-30 09:45:00',
    warningType: '故障告警'
  }
];
const equipData = ref<any>([
  {
    name: '报废',
    value: 1546
  },
  {
    name: '维修中',
    value: 189
  },
  {
    name: '故障',
    value: 1452
  },
  {
    name: '其他',
    value: 189
  },
  {
    name: '正在运行',
    value: 600
  },
  {
    name: '停役',
    value: 200
  }
]);
const color = ['#1990FF', '#8543E0', '#30C25B', '#16C2C2', '#FACC14', '#F04864'];
equipData.value.forEach((item, index) => {
  const tag = index % 6;
  item.itemStyle = {
    color: color[tag] || ''
  };
});
let equipTotal = 0;
equipData.value.forEach((v) => {
  equipTotal += v.value;
});
const equipOption = computed(() => {
  return {
    legend: {
      show: true,
      left: '0%',
      bottom: '5%',
      itemGap: 10,
      borderRadius: 5,
      itemWidth: 10,
      icon: 'circle',
      itemHeight: 10,
      data: equipData.value,
      formatter: function (name) {
        const res = equipData.value.filter((n) => {
          return n.name === name;
        });
        if (!res.length) return;
        return `${name}  ${res[0].value ? ((res[0].value / equipTotal) * 100).toFixed(2) : 0}%  ${res[0].value}`;
      }
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(13,5,30,.6)',
      borderWidth: 1,
      borderColor: '#32A1FF',
      padding: 5,
      textStyle: {
        color: '#fff'
      },
      formatter: (params) => {
        return `${params.name}<br/>${params.marker}${params.value}`;
      }
    },
    title: {
      show: true,
      text: '设备总数',
      itemGap: 5, //主副标题之间的距离
      left: 'center',
      top: '28%',
      textStyle: {
        fontSize: 13,
        color: '#9E9E9E',
        fontWeight: 'normal'
      },
      subtext: '4226',
      subtextStyle: {
        fontSize: 18,
        fontWeight: 500,
        color: '#333'
      }
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['50%', '35%'],
        itemStyle: {
          borderWidth: 2, //描边线宽
          borderColor: '#fff'
        },
        label: {
          show: false
        },
        labelLine: {},
        data: equipData.value
      }
    ]
  };
});
const getRecentWeekDates = () => {
  const today = new Date();
  const dates = [];
  for (let i = 0; i < 7; i++) {
    // 创建一个新的日期对象，将今天的日期减去i天
    const date = new Date(today);
    date.setDate(date.getDate() - i);

    // 将日期格式化为 YYYY/MM/DD 或者其他你想要的格式
    const formattedDate = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`;
    dates.push(formattedDate);
  }
  // 由于我们是从今天开始向过去推算的，所以需要反转数组以使日期递增
  dates.reverse();
  return dates;
};
const checkData = getRecentWeekDates().map((item) => ({
  xData: item.substr(5),
  yData1: Math.floor(Math.random() * 100),
  yData2: Math.floor(Math.random() * 100)
}));
const checkOption = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      show: true,
      left: '10%',
      top: '5%',
      itemWidth: 15,
      itemHeight: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '1%',
      top: '20%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: checkData.map((item) => item.xData),
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '巡检设备数',
        type: 'bar',
        barWidth: '12',
        data: checkData.map((item) => item.yData1),
        itemStyle: {
          color: '#6395FA'
        }
      },
      {
        name: '维修设备数',
        type: 'bar',
        barWidth: '12',
        data: checkData.map((item) => item.yData2),
        itemStyle: {
          color: '#65DAAB'
        }
      }
    ]
  };
});
const lineData = getRecentWeekDates().map((item) => ({
  xData: item.substr(5),
  yData1: Math.floor(Math.random() * 100),
  yData2: Math.floor(Math.random() * 100),
  yData3: Math.floor(Math.random() * 100)
}));
const lineOption = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      show: true,
      left: '10%',
      top: '5%',
      itemWidth: 20,
      itemHeight: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '20%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: lineData.map((item) => item.xData)
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '故障数',
        type: 'line',
        itemStyle: {
          color: '#6395FA'
        },
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: lineData.map((item) => item.yData1)
      },
      {
        name: '告警数',
        type: 'line',
        itemStyle: {
          color: '#5AD8A6'
        },
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: lineData.map((item) => item.yData2)
      },
      {
        name: '离线数',
        type: 'line',
        itemStyle: {
          color: '#5E7092'
        },
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: lineData.map((item) => item.yData3)
      }
    ]
  };
});
</script>
<style lang="scss" scoped>
.positionImg {
  padding: 10px 0;
  width: 100%;
  height: 100%;
}

.chart-group {
  display: flex;
  margin-top: 5px;

  >div {
    width: 50%;
  }

  .chart-two {
    display: flex;

    >div {
      flex: 1;
      flex-shrink: 0;
    }
  }

  :deep(.el-card__body) {
    height: 100%;
    padding: 15px 10px !important;
  }

  .el-card {
    height: 350px;
    background: #fff;

    &:not(:first-child) {
      margin-left: 5px;
    }
  }

  .chart-content {
    height: calc(100% - 10px);
    margin-top: 5px;
    border-top: 1px solid #eaebee;
  }
}

.check-summary {
  display: flex;
  margin-top: 10px;

  >div {
    flex: 1;
    padding: 5px 10px;
    display: flex;
    background: #fafbfc;
    border: 1px solid #e4e5e9;
    border-radius: 4px;

    &:not(:first-child) {
      margin-left: 10px;
    }

    img {
      height: 40px;
    }

    .check-name {
      margin-left: 10px;

      div:first-child {
        font-size: 16px;
        font-weight: 500;
      }

      div:last-child {
        font-size: 14px;
      }
    }
  }
}

.check-rank {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;

  >div:first-child {
    font-size: 14px;
  }
}

.warnBtns {
  display: flex;

  .el-button+.el-button {
    margin-left: 5px;
  }
}

.warningTable {
  :deep(.cell) {
    padding: 0 3px !important;
    font-size: 12px;
  }
}
</style>
