<template>
    <div class="dashboard">
      <!-- 顶部标题 -->
      <header class="header">
        <h1>碳林</h1>
        <span>{{ currentTime }}</span>
      </header>
  
      <!-- 主体区域 -->
      <div class="main">
        <!-- 左侧信息 -->
        <div class="panel left-panel">
          <div class="card" v-for="(item, index) in leftData" :key="index">
            <p>{{ item.title }}</p>
            <h2>{{ item.value }}</h2>
          </div>
          <div class="chart-box">
            <v-chart class="chart" :option="carbonFootprintOption" />
          </div>
        </div>
  
        <!-- 中心地图 -->
        <div class="map-container">
          <v-chart class="map-chart" :option="mapOption" />
          <h2>今日碳减排总量: 1318 kg</h2>
        </div>
  
        <!-- 右侧图表 -->
        <div class="panel right-panel">
          <v-chart class="chart" :option="monthlySpecialLabelOption" />
          <v-chart class="chart" :option="monthlyBoxCountOption" />
          <v-chart class="chart" :option="boxWeightDistributionOption" />
        </div>
      </div>
  
      <!-- 底部数据表 -->
      <div class="footer">
        <el-table :data="tradeData" border>
          <el-table-column prop="exchange" label="交易所" />
          <el-table-column prop="project" label="项目" />
          <el-table-column prop="price" label="价格 (RMB)" />
          <el-table-column prop="region" label="地区" />
        </el-table>
      </div>
    </div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  import "echarts/map/js/china";
  import VChart from "vue-echarts";
  
  export default {
    components: { VChart },
    data() {
      return {
        currentTime: new Date().toLocaleString(),
        leftData: [
          { title: "在线车数", value: "112 / 120" },
          { title: "当日减碳", value: "334kg" },
          { title: "当日用氢量", value: "334kg" },
          { title: "当日里程", value: "3300km" },
        ],
        tradeData: [
          { exchange: "北京碳交易所", project: "CCER", price: 100, region: "中国·北京" },
          { exchange: "上海环境能源交易所", project: "CCER", price: 98, region: "中国·上海" },
          { exchange: "深圳排放权交易所", project: "CCER", price: 97, region: "中国·深圳" },
          { exchange: "广东碳排放交易所", project: "CCER", price: 96, region: "中国·广东" },
          { exchange: "湖北碳排放交易所", project: "CCER", price: 95, region: "中国·湖北" },
        ],
        // 碳足迹折线图
        carbonFootprintOption: {
          tooltip: { trigger: "axis" },
          legend: { data: ["碳减排量", "行驶里程"] },
          xAxis: { type: "category", data: ["1月", "2月", "3月", "4月", "5月", "6月"] },
          yAxis: [{ type: "value" }, { type: "value" }],
          series: [
            { name: "碳减排量", type: "bar", data: [10000, 20000, 15000, 30000, 25000, 35000] },
            { name: "行驶里程", type: "line", yAxisIndex: 1, data: [10, 20, 18, 25, 22, 28] },
          ],
        },
        // 中国地图
        mapOption: {
          tooltip: { trigger: "item" },
          visualMap: { min: 0, max: 100, text: ["高", "低"], calculable: true },
          series: [
            {
              type: "map",
              map: "china",
              data: [
                { name: "北京", value: 80 },
                { name: "上海", value: 50 },
                { name: "广东", value: 90 },
              ],
            },
          ],
        },
        // 特殊标箱情况
        monthlySpecialLabelOption: {
          tooltip: { trigger: "axis" },
          legend: { data: ["空箱", "危险品"] },
          xAxis: { type: "category", data: ["1月", "2月", "3月", "4月", "5月"] },
          yAxis: { type: "value" },
          series: [
            { name: "空箱", type: "line", data: [10, 20, 30, 40, 50] },
            { name: "危险品", type: "line", data: [200, 250, 300, 350, 400] },
          ],
        },
        // 月度标箱数
        monthlyBoxCountOption: {
          tooltip: { trigger: "axis" },
          xAxis: { type: "category", data: ["1月", "2月", "3月", "4月", "5月"] },
          yAxis: { type: "value" },
          series: [{ type: "bar", data: [30000, 40000, 35000, 45000, 38000] }],
        },
        // 标箱重量分布
        boxWeightDistributionOption: {
          tooltip: { trigger: "item" },
          series: [
            {
              type: "pie",
              radius: ["40%", "70%"],
              data: [
                { value: 1234, name: "1~5T" },
                { value: 1234, name: "5~10T" },
                { value: 1234, name: "10~15T" },
              ],
            },
          ],
        },
      };
    },
    mounted() {
      this.updateTime();
    },
    methods: {
      updateTime() {
        setInterval(() => {
          this.currentTime = new Date().toLocaleString();
        }, 1000);
      },
    },
  };
  </script>
  
  <style scoped>
  .dashboard {
    background: #0a1931;
    color: white;
    padding: 20px;
  }
  .header {
    display: flex;
    justify-content: space-between;
    font-size: 24px;
  }
  .main {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  .map-container {
    width: 50%;
    text-align: center;
  }
  .chart {
    height: 200px;
  }
  </style>
  