<script>
import SvgDashboard from "../images/dashboard.svg?component"; // vite-svg-loader 插件的功能
import * as echarts from "echarts";
export default {
  name: "home",
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // // 初始化图表
      const myChart1 = echarts.init(this.$refs.overviewChart);
      const myChart2 = echarts.init(this.$refs.transportChart);
      // // 设置配置选项
      const option1 = {
        title: {
          text: "矿山生产趋势",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["矿石产量", "选矿量", "运输量"],
          bottom: 0,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "矿石产量",
            type: "line",
            data: [120, 132, 101, 134, 90, 230, 210],
            smooth: true,
            lineStyle: {
              width: 3,
            },
          },
          {
            name: "选矿量",
            type: "line",
            data: [85, 93, 90, 93, 65, 83, 89],
            smooth: true,
            lineStyle: {
              width: 3,
            },
          },
          {
            name: "运输量",
            type: "line",
            data: [110, 120, 105, 125, 95, 150, 135],
            smooth: true,
            lineStyle: {
              width: 3,
            },
          },
        ],
      };
      const option2 = {
        title: {
          text: "运输数据统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          bottom: 0,
        },
        series: [
          {
            name: "运输方式",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "卡车运输" },
              { value: 735, name: "皮带运输" },
              { value: 580, name: "铁路运输" },
              { value: 484, name: "其他方式" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart1.setOption(option1);
      myChart2.setOption(option2);
    },
  },
};
</script>

<template>
  <div class="home">
    <div class="function-bar">
      <div class="one-box">
        <div class="daiban-top"><i class="iconfont wodeyiban"></i></div>
        <div
          class="daiban-center"
          style="font-size: 24px; font-weight: 700; margin: 10px"
        >
          12
        </div>
        <div class="daiban-bottom">待办事项</div>
      </div>
      <div class="two-box">
        <div class="yiban-top"><i class="iconfont daibanrenwu"></i></div>
        <div
          class="yiban-center"
          style="font-size: 24px; font-weight: 700; margin: 10px"
        >
          0
        </div>
        <div class="yiban-bottom">已办事项</div>
      </div>
      <div class="three-box">
        <div class="jinji-top"><i class="iconfont jinjianniu"></i></div>
        <div
          class="jinji-center"
          style="font-size: 24px; font-weight: 700; margin: 10px"
        >
          0
        </div>
        <div class="jinji-bottom">紧急事项</div>
      </div>
      <div class="four-box">
        <div class="taskAll-top"><i class="iconfont suoyou"></i></div>
        <div
          class="taskAll-center"
          style="font-size: 24px; font-weight: 700; margin: 10px"
        >
          0
        </div>
        <div class="taskAll-bottom">所有任务</div>
      </div>
    </div>
    <div class="echarts-bar">
      <div class="card">
        <div class="card-header">
          <div class="card-title">矿山生产总览</div>
        </div>
        <div class="chart-container" ref="overviewChart"></div>
      </div>
      <div class="card">
        <div class="card-header">
          <div class="card-title">运输数据统计</div>
        </div>
        <div class="chart-container" ref="transportChart"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .function-bar {
    display: flex;
    height: 20%;
    margin: 10px;
    i {
      font-size: 36px;
    }

    .one-box,
    .two-box,
    .three-box,
    .four-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 25%;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 20px;
      margin: 0 5px;
      transition: all 0.3s;
      cursor: pointer;
    }
    .one-box {
      margin-left: 0;
      background: linear-gradient(
        135deg,
        #c7e9fb,
        #a6defa,
        #80d4f9,
        #5bc9f8,
        #35bef7
      );
    }
    .two-box {
      background: linear-gradient(135deg, #f6d365, #fda085);
    }
    .three-box {
      background: linear-gradient(135deg, #f69165, #f14115);
    }
    .four-box {
      margin-right: 0;
      background: linear-gradient(135deg, #65e0f6, #0abbec);
    }
  }
  .echarts-bar {
    display: flex;
    height: 70%;
    // /* 卡片样式 */
    .card {
      width: 50%;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 20px;
      margin: 0 5px;
      transition: all 0.3s;
    }
    .card:hover {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }
    .card-header {
      display: flex;
      justify-content: between;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e0e0e0;
    }
    .card-title {
      font-size: 18px;
      color: #1a237e;
      font-weight: bold;
    }
    .container {
      display: flex;
      min-height: 100vh;
    }
    /* 图表容器 */
    .chart-container {
      height: 300px;
      width: 100%;
    }
  }
}
</style>
