寒假生活指导17

<template>
    <div class="carbon-quota-page">
      <!-- 页面标题 -->
      <h1>碳额度查询</h1>
  
      <!-- 查询表单区域 -->
      <el-form v-if="!loading" :model="form" ref="queryForm" label-width="80px" @submit.prevent="fetchQuota">
        <el-form-item label="企业ID：" prop="enterpriseId" required>
          <el-input id="enterprise-id" v-model.trim="form.enterpriseId" placeholder="样例：1或者2"></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="fetchQuota">查询碳排放配额</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 加载提示 -->
      <p v-if="loading">正在加载数据...</p>

      <div class="carbon-quota-container" >
        <div class="carbon-quota-chart">
            <div ref="chart" style="width: 600px; height: 400px;"></div> <!-- 创建一个用于放置图表的div -->
      </div>

      <!-- 结果展示区域 -->
      <div v-if="quota && !loading">
    <el-card class="carbon-quota-card">
      <h2 slot="header">企业碳排放配额余额</h2>
      <el-table :data="[quota]" style="width: 100%">
        <el-table-column prop="enterpriseName" label="当前企业" width="180"></el-table-column>
        <el-table-column prop="balance" label="剩余碳排放配额(吨)" align="center" width="180">
          <template slot-scope="scope">{{ scope.row.balance.toFixed(2) }}</template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
  </div>


      <!-- 错误信息提示 -->
      <p v-if="error" class="error">{{ error }}</p>
    </div>
  </template>
  
  <script>
import * as echarts from 'echarts';
  import { Form, FormItem, Input, Button } from 'element-ui';
  
  export default {
    components: {
      ElForm: Form,
      ElFormItem: FormItem,
      ElInput: Input,
      ElButton: Button,
    },
    mounted() {
        this.$nextTick(() => {
      this.initChart();
    });
  },
    data() {
      return {
        loading: false,
        form: {
          enterpriseId: '',
        },
        quota: null,
        error: '',
        data:[0,0,0,0,0]
      };
    },
    methods: {
      async fetchQuota() {
        this.loading = true;
        try {
            if(this.form.enterpriseId == '1'){
                this.quota = {
            "enterpriseName": "企业1",
            "balance": 12345.67, // 假设单位为吨
          };
          this.data=[1500,1200,1600,1100,1800],
          this.error = '';
            }else if(this.form.enterpriseId == '2'){
                this.quota = {
            "enterpriseName": "企业2",
            "balance": 5162.67, // 假设单位为吨
          };
          this.data=[900,1200,1100,1500,1300],
          this.error = '';
        }else{
            this.quota = {
                "enterpriseName": "",
            "balance": 0, // 假设单位为吨
          };
            this.error = '查询失败，未找到该公司。';
            this.data=[0,0,0,0,0]
          }
          this.initChart();
        } catch (error) {
          this.error = '查询失败，请检查企业ID是否正确或稍后再试。';
        } finally {
          this.loading = false;
        }
      },
      initChart() {
      const chartDom = this.$refs.chart;
      const chartInstance = echarts.init(chartDom);

      // 设置图表配置项
      chartInstance.setOption({
    title: {
      text: '企业碳排放趋势',
    },
    tooltip: {},
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月'],
    },
    yAxis: {},
    series: [
      {
        name: '剩余碳排放量',
        type: 'line', // 将此处的 'bar' 改为 'line' 类型以显示折线图
        data: this.data,
      },
    ],
    // 添加工具箱
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {}, // 保存图片功能
        dataView: {}, // 数据视图
        magicType: { // 图表切换（包括折线图、柱状图等）
          type: ['line', 'bar']
        },
        restore: {}, // 恢复默认设置
        dataZoom: {}, // 数据区域缩放
        brush: {} // 区域选择
      }
    },
  });
    },
    },
  };
  </script>
  
  <style scoped>
  /* 添加相应的样式 */
  .error {
    color: red;
  }
  .carbon-quota-page {}
.carbon-quota-container {
  display: flex;
}

.carbon-quota-chart {
  width: 50%;
  margin-right: 20px;
}
  </style>

碳额度的发放页面。