carbon-emissions-management/src/views/b/aa/index.vue

<template>
  <el-container style="height: 90vh; border: 1px solid #eee; padding: 20px;">
    <el-container>
      <el-aside style="width: 600px; margin-right: 20px;">
        <div class="config-container">
          <el-form ref="formRef" :model="form" :rules="rules" label-width="150px" @submit.native.prevent="saveConfig">
            <el-form-item label="基础类参数" prop="baseParams">
              <el-input v-model="form.baseParams" placeholder="请输入基础类参数"></el-input>
            </el-form-item>
            <el-form-item label="情景依托类参数" prop="scenarioParams">
              <el-input v-model="form.scenarioParams" placeholder="请输入情景依托类参数"></el-input>
            </el-form-item>
            <el-form-item label="规划边界类参数" prop="boundaryParams">
              <el-input v-model="form.boundaryParams" placeholder="请输入规划边界类参数"></el-input>
            </el-form-item>
            <el-form-item label="其他参数" prop="otherParams">
              <el-input v-model="form.otherParams" placeholder="请输入其他参数"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注"></el-input>
            </el-form-item>
            <el-form-item label="日期" prop="date">
              <el-date-picker
                  v-model="form.date"
                  type="date"
                  placeholder="请选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              ></el-date-picker>
            </el-form-item>
            <el-button type="primary" @click="saveConfig">保存配置</el-button>
          </el-form>
        </div>
      </el-aside>
      <el-main style="display: block;background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
        <h2>碳排放形势预测分析</h2>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card shadow="hover">
              <div slot="header">
                <span>历史碳排放数据</span>
              </div>
              <div>
                <el-table :data="historicalData" style="width: 100%">
                  <el-table-column prop="year" label="年份" width="100"></el-table-column>
                  <el-table-column prop="emission" label="碳排放量 (吨)" width="180"></el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover">
              <div slot="header">
                <span>未来碳排放预测</span>
              </div>
              <div>
                <el-table :data="futureData" style="width: 100%">
                  <el-table-column prop="year" label="年份" width="100"></el-table-column>
                  <el-table-column prop="predictedEmission" label="预测碳排放量 (吨)" width="180"></el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <el-card shadow="hover">
              <div slot="header">
                <span>碳排放趋势图</span>
              </div>
              <div>
                <div id="chart" style="width: 100%; "></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';

const form = ref({
  baseParams: '',
  scenarioParams: '',
  boundaryParams: '',
  otherParams: '',
  remarks: '',
  date: ''
});

const formRef = ref(null);

const rules = {
  baseParams: [
    { required: true, message: '请输入基础类参数', trigger: 'blur' }
  ],
  scenarioParams: [
    { required: true, message: '请输入情景依托类参数', trigger: 'blur' }
  ],
  boundaryParams: [
    { required: true, message: '请输入规划边界类参数', trigger: 'blur' }
  ],
  otherParams: [
    { required: true, message: '请输入其他参数', trigger: 'blur' }
  ],
  remarks: [
    { required: true, message: '请输入备注', trigger: 'blur' }
  ],
  date: [
    { required: true, message: '请选择日期', trigger: 'change' }
  ]
};

const historicalData = ref([
  { year: '2020', emission: 1000 },
  { year: '2021', emission: 1100 },
  { year: '2022', emission: 1200 },
  { year: '2023', emission: 1300 },
  { year: '2024', emission: 1400 }
]);

const futureData = ref([
  { year: '2025', predictedEmission: 1500 },
  { year: '2026', predictedEmission: 1600 },
  { year: '2027', predictedEmission: 1700 },
  { year: '2028', predictedEmission: 1800 },
  { year: '2029', predictedEmission: 1900 }
]);

const saveConfig = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage({
        message: '保存成功',
        type: 'success'
      });
    } else {
      ElMessage({
        message: '请填写完整的信息',
        type: 'error'
      });
      return false;
    }
  });
};

onMounted(() => {
  const chart = echarts.init(document.getElementById('chart'));
  const option = {
    title: {
      text: '碳排放趋势图'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '历史数据',
        type: 'line',
        data: [1521, 1543, 1578, 1456, 1347, 1435, 1654]
      },
      {
        name: '预测数据',
        type: 'line',
        data: [null, null, null, null, null, null, null, 1700, 1800, 1900]
      }
    ]
  };
  chart.setOption(option);
});
</script>

<style scoped>
.el-container {
  height: 100vh;
  border: 1px solid #eee;
  padding: 20px;
  background-color: #f5f7fa;
}

.el-header {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-aside {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.config-container {
  max-width: 600px;
  width: 100%;
}

h1, h2 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 20px;
  text-align: left;
}

.el-form {
  max-width: 100%;
  margin: 0 auto;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  color: #606266;
  font-weight: bold;
}

.el-textarea__inner {
  height: 100px;
}

.el-button {
  margin-top: 20px;
  width: 100%;
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 4px;
  transition: all 0.3s;
}

.el-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.el-card {
  margin-bottom: 20px;
}

.el-table {
  width: 100%;
}

#chart {
  width: 100%;
  height: 400px;
}
</style>