双碳平台静态页面提交

.env.development

@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 双碳管理平台系统
 
 # 开发环境配置
 VITE_APP_ENV = 'development'

.env.production

@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 双碳管理平台系统
 
 # 生产环境配置
 VITE_APP_ENV = 'production'

package.json

@@ -21,9 +21,11 @@
     "@vueuse/core": "10.11.0",
     "axios": "0.28.1",
     "echarts": "5.5.1",
+    "echarts-gl": "^2.0.9",
     "element-plus": "2.7.6",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
+    "html2pdf.js": "^0.10.2",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "nprogress": "0.2.0",

src/layout/components/Navbar.vue

@@ -8,14 +8,6 @@
       <template v-if="appStore.device !== 'mobile'">
         <header-search id="header-search" class="right-menu-item" />
 
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
         <el-tooltip content="布局大小" effect="dark" placement="bottom">

src/views/b/aa/index.vue

@@ -1,43 +1,88 @@
 <template>
-  <el-container style="height: 100vh; border: 1px solid #eee; padding: 20px;">
-    <el-main style="height: calc(100% - 60px);">
-      <div class="config-container">
-        <h1>模型参数配置</h1>
-        <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-main>
+  <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 } from 'vue';
+import { ref, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
+import * as echarts from 'echarts';
 
 const form = ref({
   baseParams: '',
@@ -71,6 +116,22 @@ const rules = {
   ]
 };
 
+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) {
@@ -87,9 +148,41 @@ const saveConfig = () => {
     }
   });
 };
+
+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>
+<style scoped>
 .el-container {
   height: 100vh;
   border: 1px solid #eee;
@@ -97,24 +190,26 @@ const saveConfig = () => {
   background-color: #f5f7fa;
 }
 
-.el-main {
-  height: calc(100% - 60px);
-  padding: 0;
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
+.el-header {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 
-.config-container {
+.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 {
+h1, h2 {
   font-size: 24px;
   color: #303133;
   margin-bottom: 20px;
@@ -135,7 +230,6 @@ h1 {
   font-weight: bold;
 }
 
-
 .el-textarea__inner {
   height: 100px;
 }
@@ -156,4 +250,17 @@ h1 {
   background-color: #66b1ff;
   border-color: #66b1ff;
 }
+
+.el-card {
+  margin-bottom: 20px;
+}
+
+.el-table {
+  width: 100%;
+}
+
+#chart {
+  width: 100%;
+  height: 400px;
+}
 </style>

src/views/b/ab/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container style="height: 100vh; border: 1px solid #eee; padding: 20px;">
+  <el-container style="height: 90vh; border: 1px solid #eee; padding: 20px;">
     <el-header style="text-align: right; margin-bottom: 20px;">
       <el-button type="primary" @click="toggleChartType">切换图表类型</el-button>
     </el-header>
@@ -10,7 +10,7 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-card style="height: 100%;">
-                <div id="chart" style="width: 600px; height: 400px;"></div>
+                <div id="chart" style="width: 100%; height: 400px;"></div>
               </el-card>
             </el-col>
             <el-col :span="12">
@@ -31,29 +31,38 @@
             <el-col :span="12">
               <el-card style="height: 100%;">
                 <h2>报告概要</h2>
-                <p>报告概要内容...</p>
+                <p>本报告基于过去几年的碳排放和能源消耗数据，对碳排放趋势进行了详细分析，并提出了相应的建议。</p>
                 <el-divider></el-divider>
                 <h3>主要发现</h3>
                 <ul>
                   <li>碳排放量在过去几年呈上升趋势。</li>
                   <li>能源消耗量与碳排放量呈正相关。</li>
+                  <li>工业部门是碳排放的主要来源之一。</li>
                 </ul>
               </el-card>
             </el-col>
             <el-col :span="12">
               <el-card style="height: 100%;">
                 <h2>详细分析</h2>
-                <p>详细分析内容...</p>
+                <p>通过对数据的深入分析，我们发现以下几点：</p>
                 <el-divider></el-divider>
                 <h3>数据解读</h3>
-                <p>通过对数据的深入分析，我们发现以下几点：</p>
                 <ul>
                   <li>2015年至2021年，碳排放量逐年增加。</li>
                   <li>能源消耗量的增长是导致碳排放量增加的主要因素之一。</li>
+                  <li>工业部门的碳排放量占总排放量的比重最大。</li>
+                </ul>
+                <el-divider></el-divider>
+                <h3>行业分析</h3>
+                <ul>
+                  <li>制造业：碳排放量增长最快，需重点治理。</li>
+                  <li>交通运输业：碳排放量稳定增长，需推广新能源汽车。</li>
+                  <li>电力行业：碳排放量较高，需提高清洁能源比例。</li>
                 </ul>
               </el-card>
             </el-col>
           </el-row>
+          <el-button type="success" @click="downloadReport" style="margin-top: 20px;">下载报告</el-button>
         </el-tab-pane>
         <el-tab-pane label="预测与建议" name="predictions">
           <h1>预测与建议</h1>
@@ -64,7 +73,14 @@
                 <p>根据当前数据和模型，预计未来几年的碳排放量将有所下降。</p>
                 <el-divider></el-divider>
                 <h3>预测模型</h3>
-                <p>我们使用了线性回归模型来预测未来的碳排放量。</p>
+                <p>我们使用了线性回归模型来预测未来的碳排放量。模型考虑了多种因素，包括经济发展、政策调控和技术进步。</p>
+                <el-divider></el-divider>
+                <h3>预测结果</h3>
+                <ul>
+                  <li>2022年：预计碳排放量为200万吨。</li>
+                  <li>2023年：预计碳排放量为190万吨。</li>
+                  <li>2024年：预计碳排放量为180万吨。</li>
+                </ul>
               </el-card>
             </el-col>
             <el-col :span="12">
@@ -74,13 +90,15 @@
                   <li>提高能效，减少能源消耗。</li>
                   <li>推广可再生能源的使用。</li>
                   <li>加强碳捕捉和存储技术的应用。</li>
+                  <li>鼓励企业采用低碳生产技术。</li>
                 </ul>
                 <el-divider></el-divider>
                 <h3>实施步骤</h3>
                 <ol>
-                  <li>制定详细的能效提升计划。</li>
-                  <li>投资可再生能源项目。</li>
-                  <li>开展碳捕捉和存储技术研发。</li>
+                  <li>制定详细的能效提升计划，包括设备更新和技术改造。</li>
+                  <li>投资可再生能源项目，如太阳能和风能发电站。</li>
+                  <li>开展碳捕捉和存储技术研发，降低技术成本。</li>
+                  <li>出台相关政策，鼓励企业采用低碳生产技术。</li>
                 </ol>
               </el-card>
             </el-col>
@@ -95,6 +113,7 @@
 import { ref, onMounted, onBeforeUnmount } from 'vue';
 import * as echarts from 'echarts';
 import { ElMessage } from 'element-plus';
+import html2pdf from 'html2pdf.js';
 
 const activeTab = ref('trend-analysis');
 const chart = ref(null);
@@ -106,7 +125,10 @@ const tableData = ref([
   { year: '2018', emission: 134, energy: 234 },
   { year: '2019', emission: 90, energy: 290 },
   { year: '2020', emission: 230, energy: 330 },
-  { year: '2021', emission: 210, energy: 310 }
+  { year: '2021', emission: 210, energy: 310 },
+  { year: '2022', emission: 200, energy: 320 }, // 预测数据
+  { year: '2023', emission: 190, energy: 310 }, // 预测数据
+  { year: '2024', emission: 180, energy: 300 }  // 预测数据
 ]);
 
 const initChart = () => {
@@ -224,6 +246,12 @@ const toggleChartType = () => {
   updateChart();
 };
 
+const downloadReport = () => {
+  const element = document.querySelector('.el-tab-pane[name="report"]');
+  html2pdf().from(element).save('数据分析报告.pdf');
+  ElMessage.success('报告已成功下载');
+};
+
 onMounted(() => {
   initChart();
 });
@@ -235,7 +263,8 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style>
+
+<style scoped>
 .el-main {
   padding: 20px;
   height: 100%;
@@ -251,10 +280,12 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   transition: box-shadow 0.3s ease;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .el-card:hover {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }
 
 .el-card__body {
@@ -262,27 +293,51 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  padding: 20px;
 }
 
 .el-table {
   width: 100%;
   transition: background-color 0.3s ease;
+  border-radius: 10px;
+  overflow: hidden;
 }
 
 .el-divider {
   margin: 20px 0;
+  border-color: #e0e0e0;
 }
 
 h2, h3 {
   margin-top: 0;
+  color: #333;
 }
 
 ul, ol {
   margin: 10px 0;
   padding-left: 20px;
+  list-style-type: disc;
 }
 
 p {
   margin: 10px 0;
+  line-height: 1.6;
+  color: #666;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+h2 {
+  font-size: 20px;
+  margin-bottom: 15px;
+}
+
+h3 {
+  font-size: 18px;
+  margin-bottom: 10px;
 }
 </style>

src/views/c/aa/index.vue

@@ -1,11 +1,450 @@
+<template>
+  <el-container style="height: 90vh; border: 1px solid #eee; padding: 20px;">
+    <el-main style="height: calc(100% - 20px); display: flex; flex-wrap: wrap;">
+      <el-col :span="12" style="position: relative; margin-bottom: 20px;">
+        <div style="position: absolute; top: 10px; left: 10px; z-index: 10;">
+          <el-button type="primary" size="small" @click="toggleEnergyChartType">切换能耗图表类型</el-button>
+        </div>
+        <el-card style="height: 100%;">
+          <div id="energyChart" style="width: 100%; height: 400px;"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" style="position: relative; margin-bottom: 20px;">
+        <div style="position: absolute; top: 10px; left: 10px; z-index: 10;">
+          <el-button type="primary" size="small" @click="toggleCarbonChartType">切换碳排图表类型</el-button>
+        </div>
+        <el-card style="height: 100%;">
+          <div id="carbonChart" style="width: 100%; height: 400px;"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" style="position: relative; margin-bottom: 20px;">
+        <div style="position: absolute; top: 10px; left: 10px; z-index: 10;">
+          <el-button type="primary" size="small" @click="toggleProductChartType">切换产品单耗图表类型</el-button>
+        </div>
+        <el-card style="height: 100%;">
+          <div id="productChart" style="width: 100%; height: 400px;"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" style="margin-bottom: 20px;">
+        <el-card style="height: 100%;">
+          <el-table :data="tableData" style="width: 100%;">
+            <el-table-column prop="name" label="企业名称" width="180"></el-table-column>
+            <el-table-column prop="energy" label="能耗总量 (吨)" width="180"></el-table-column>
+            <el-table-column prop="carbon" label="碳排总量 (吨)" width="180"></el-table-column>
+            <el-table-column prop="product" label="产品单耗 (吨/件)" width="180"></el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-main>
+  </el-container>
+</template>
+
+
 <script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import * as echarts from 'echarts';
+import { ElMessage } from 'element-plus';
+
+const energyChart = ref(null);
+const carbonChart = ref(null);
+const productChart = ref(null);
+const energyChartType = ref('bar');
+const carbonChartType = ref('bar');
+const productChartType = ref('bar');
+
+const tableData = ref([
+  { name: '绿能科技', energy: 120, carbon: 100, product: 0.5 },
+  { name: '蓝天环保', energy: 132, carbon: 110, product: 0.6 },
+  { name: '清源能源', energy: 101, carbon: 90, product: 0.4 },
+  { name: '阳光动力', energy: 134, carbon: 120, product: 0.7 },
+  { name: '风力发电', energy: 90, carbon: 80, product: 0.3 },
+  { name: '海洋能源', energy: 230, carbon: 200, product: 0.8 },
+  { name: '生物质能', energy: 210, carbon: 190, product: 0.6 },
+  { name: '地热发电', energy: 200, carbon: 180, product: 0.5 },
+  { name: '核能发电', energy: 190, carbon: 170, product: 0.4 },
+  { name: '太阳能', energy: 180, carbon: 160, product: 0.3 }
+]);
+
+const initEnergyChart = () => {
+  energyChart.value = echarts.init(document.getElementById('energyChart'));
+  updateEnergyChart();
+};
+
+const initCarbonChart = () => {
+  carbonChart.value = echarts.init(document.getElementById('carbonChart'));
+  updateCarbonChart();
+};
+
+const initProductChart = () => {
+  productChart.value = echarts.init(document.getElementById('productChart'));
+  updateProductChart();
+};
+
+const updateEnergyChart = () => {
+  const option = {
+    title: {
+      text: '能耗总量趋势分析',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    legend: {
+      data: ['能耗总量'],
+      bottom: '10px'
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '10%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: tableData.value.map(item => item.name),
+        axisLabel: {
+          interval: 0,
+          rotate: 45
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '能耗总量 (吨)',
+        min: 0,
+        max: 300,
+        interval: 50,
+        axisLabel: {
+          formatter: '{value} 吨'
+        }
+      }
+    ],
+    series: [
+      {
+        name: '能耗总量',
+        type: energyChartType.value,
+        data: tableData.value.map(item => item.energy),
+        areaStyle: {}
+      }
+    ]
+  };
+
+  if (energyChartType.value === 'pie') {
+    option.series = [
+      {
+        name: '能耗总量',
+        type: 'pie',
+        radius: '50%',
+        data: tableData.value.map(item => ({ value: item.energy, name: item.name })),
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ];
+  }
+
+  energyChart.value.setOption(option);
+};
+
+const updateCarbonChart = () => {
+  const option = {
+    title: {
+      text: '碳排总量趋势分析',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    legend: {
+      data: ['碳排总量'],
+      bottom: '10px'
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '10%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: tableData.value.map(item => item.name),
+        axisLabel: {
+          interval: 0,
+          rotate: 45
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '碳排总量 (吨)',
+        min: 0,
+        max: 300,
+        interval: 50,
+        axisLabel: {
+          formatter: '{value} 吨'
+        }
+      }
+    ],
+    series: [
+      {
+        name: '碳排总量',
+        type: carbonChartType.value,
+        data: tableData.value.map(item => item.carbon),
+        areaStyle: {}
+      }
+    ]
+  };
+
+  if (carbonChartType.value === 'pie') {
+    option.series = [
+      {
+        name: '碳排总量',
+        type: 'pie',
+        radius: '50%',
+        data: tableData.value.map(item => ({ value: item.carbon, name: item.name })),
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ];
+  }
+
+  carbonChart.value.setOption(option);
+};
+
+const updateProductChart = () => {
+  const option = {
+    title: {
+      text: '产品单耗趋势分析',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    legend: {
+      data: ['产品单耗'],
+      bottom: '10px'
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '10%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: tableData.value.map(item => item.name),
+        axisLabel: {
+          interval: 0,
+          rotate: 45
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '产品单耗 (吨/件)',
+        min: 0,
+        max: 1,
+        interval: 0.1,
+        axisLabel: {
+          formatter: '{value} 吨/件'
+        }
+      }
+    ],
+    series: [
+      {
+        name: '产品单耗',
+        type: productChartType.value,
+        data: tableData.value.map(item => item.product),
+        areaStyle: {}
+      }
+    ]
+  };
+
+  if (productChartType.value === 'pie') {
+    option.series = [
+      {
+        name: '产品单耗',
+        type: 'pie',
+        radius: '50%',
+        data: tableData.value.map(item => ({ value: item.product, name: item.name })),
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ];
+  }
 
+  productChart.value.setOption(option);
+};
+
+const toggleEnergyChartType = () => {
+  const types = ['bar', 'line', 'pie'];
+  const currentIndex = types.indexOf(energyChartType.value);
+  energyChartType.value = types[(currentIndex + 1) % types.length];
+  updateEnergyChart();
+};
+
+const toggleCarbonChartType = () => {
+  const types = ['bar', 'line', 'pie'];
+  const currentIndex = types.indexOf(carbonChartType.value);
+  carbonChartType.value = types[(currentIndex + 1) % types.length];
+  updateCarbonChart();
+};
+
+const toggleProductChartType = () => {
+  const types = ['bar', 'line', 'pie'];
+  const currentIndex = types.indexOf(productChartType.value);
+  productChartType.value = types[(currentIndex + 1) % types.length];
+  updateProductChart();
+};
+
+onMounted(() => {
+  // 确保 DOM 元素已经渲染完毕
+  nextTick(() => {
+    initEnergyChart();
+    initCarbonChart();
+    initProductChart();
+  });
+});
+
+onBeforeUnmount(() => {
+  if (energyChart.value) {
+    energyChart.value.dispose();
+  }
+  if (carbonChart.value) {
+    carbonChart.value.dispose();
+  }
+  if (productChart.value) {
+    productChart.value.dispose();
+  }
+});
 </script>
 
-<template>
-  <div>asadasdsadas</div>
-</template>
+<style scoped>
+.el-main {
+  padding: 20px;
+  height: 100%;
+  transition: background-color 0.3s ease;
+}
+
+.el-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transition: box-shadow 0.3s ease;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.el-card:hover {
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.el-card__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 20px;
+}
+
+.el-table {
+  width: 100%;
+  transition: background-color 0.3s ease;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.el-divider {
+  margin: 20px 0;
+  border-color: #e0e0e0;
+}
+
+h2, h3 {
+  margin-top: 0;
+  color: #333;
+}
+
+ul, ol {
+  margin: 10px 0;
+  padding-left: 20px;
+  list-style-type: disc;
+}
+
+p {
+  margin: 10px 0;
+  line-height: 1.6;
+  color: #666;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #333;
+}
 
-<style scoped lang="scss">
+h2 {
+  font-size: 20px;
+  margin-bottom: 15px;
+}
 
-</style>
+h3 {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+</style>

src/views/c/ab/index.vue

@@ -1,11 +1,244 @@
+<template>
+  <div class="assessment-module">
+    <h2>企业能效碳效评估</h2>
+    <h3>数据质量评价</h3>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="指标完整性" name="completeness">
+        <el-button @click="exportData" style="margin-bottom: 10px;">导出数据</el-button>
+        <el-table :data="completenessData" style="width: 100%" v-show="activeName === 'completeness'">
+          <el-table-column prop="name" label="指标名称" />
+          <el-table-column prop="value" label="评分" />
+          <el-table-column label="描述">
+            <template #default="scope">
+              {{ scope.row.description }}
+            </template>
+          </el-table-column>
+          <el-table-column label="状态">
+            <template #default="scope">
+              <el-tag :type="getStatusType(scope.row.status)">
+                {{ scope.row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="actionDate" label="行动日期" />
+        </el-table>
+        <div ref="completenessChart" style="width: 500px; height: 300px; margin-top: 20px;" v-show="activeName === 'completeness'"></div>
+      </el-tab-pane>
+      <el-tab-pane label="上报及时性" name="timeliness">
+        <el-button @click="exportData" style="margin-bottom: 10px;">导出数据</el-button>
+        <el-table :data="timelinessData" style="width: 100%" v-show="activeName === 'timeliness'">
+          <el-table-column prop="name" label="指标名称" />
+          <el-table-column prop="value" label="评分" />
+          <el-table-column label="描述">
+            <template #default="scope">
+              {{ scope.row.description }}
+            </template>
+          </el-table-column>
+          <el-table-column label="状态">
+            <template #default="scope">
+              <el-tag :type="getStatusType(scope.row.status)">
+                {{ scope.row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="actionDate" label="行动日期" />
+        </el-table>
+        <div ref="timelinessChart" style="width: 500px; height: 300px; margin-top: 20px;" v-show="activeName === 'timeliness'"></div>
+      </el-tab-pane>
+      <el-tab-pane label="数据准确性" name="accuracy">
+        <el-button @click="exportData" style="margin-bottom: 10px;">导出数据</el-button>
+        <el-table :data="accuracyData" style="width: 100%" v-show="activeName === 'accuracy'">
+          <el-table-column prop="name" label="指标名称" />
+          <el-table-column prop="value" label="评分" />
+          <el-table-column label="描述">
+            <template #default="scope">
+              {{ scope.row.description }}
+            </template>
+          </el-table-column>
+          <el-table-column label="状态">
+            <template #default="scope">
+              <el-tag :type="getStatusType(scope.row.status)">
+                {{ scope.row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="actionDate" label="行动日期" />
+        </el-table>
+        <div ref="accuracyChart" style="width: 500px; height: 300px; margin-top: 20px;" v-show="activeName === 'accuracy'"></div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
 <script setup>
+import { ref, onMounted, watch } from 'vue'
+import * as echarts from 'echarts'
+import { ElMessage, ElLoading, ElTag } from 'element-plus'
 
-</script>
+const activeName = ref('completeness')
 
-<template>
-  <div>qweqeqwewqeqwe</div>
-</template>
+const completenessData = [
+  { name: '能源消耗总量', value: 85, description: '总能源消耗量', status: '正常', actionDate: '2023-10-01' },
+  { name: '可再生能源使用比例', value: 90, description: '可再生能源占比', status: '良好', actionDate: '2023-10-02' },
+  { name: '碳排放总量', value: 80, description: '总碳排放量', status: '正常', actionDate: '2023-10-03' },
+  { name: '单位产值能耗', value: 88, description: '每单位产值的能耗', status: '良好', actionDate: '2023-10-04' },
+  { name: '单位产值碳排放', value: 82, description: '每单位产值的碳排放', status: '正常', actionDate: '2023-10-05' },
+  { name: '节能改造项目数', value: 87, description: '节能改造项目的数量', status: '良好', actionDate: '2023-10-06' },
+  { name: '绿色建筑比例', value: 92, description: '绿色建筑的比例', status: '优秀', actionDate: '2023-10-07' },
+  { name: '清洁能源投资', value: 89, description: '清洁能源的投资金额', status: '良好', actionDate: '2023-10-08' },
+  { name: '碳足迹管理', value: 84, description: '碳足迹管理的情况', status: '正常', actionDate: '2023-10-09' },
+  { name: '环境管理体系认证', value: 86, description: '环境管理体系的认证情况', status: '良好', actionDate: '2023-10-10' }
+]
+
+const timelinessData = [
+  { name: '能源消耗数据上报', value: 95, description: '能源消耗数据的上报情况', status: '优秀', actionDate: '2023-10-01' },
+  { name: '碳排放数据上报', value: 90, description: '碳排放数据的上报情况', status: '良好', actionDate: '2023-10-02' },
+  { name: '节能改造项目进展', value: 85, description: '节能改造项目的进展情况', status: '正常', actionDate: '2023-10-03' },
+  { name: '绿色建筑数据', value: 92, description: '绿色建筑的数据上报情况', status: '优秀', actionDate: '2023-10-04' },
+  { name: '清洁能源投资数据', value: 88, description: '清洁能源投资的数据上报情况', status: '良好', actionDate: '2023-10-05' },
+  { name: '碳足迹管理数据', value: 91, description: '碳足迹管理的数据上报情况', status: '优秀', actionDate: '2023-10-06' },
+  { name: '环境管理体系认证数据', value: 93, description: '环境管理体系认证的数据上报情况', status: '优秀', actionDate: '2023-10-07' },
+  { name: '能源审计报告', value: 89, description: '能源审计报告的上报情况', status: '良好', actionDate: '2023-10-08' },
+  { name: '碳排放核查报告', value: 90, description: '碳排放核查报告的上报情况', status: '良好', actionDate: '2023-10-09' },
+  { name: '节能减排措施实施情况', value: 87, description: '节能减排措施实施情况的上报', status: '正常', actionDate: '2023-10-10' }
+]
+
+const accuracyData = [
+  { name: '能源消耗数据', value: 100, description: '能源消耗数据的准确性', status: '优秀', actionDate: '2023-10-01' },
+  { name: '碳排放数据', value: 100, description: '碳排放数据的准确性', status: '优秀', actionDate: '2023-10-02' },
+  { name: '节能改造项目数据', value: 100, description: '节能改造项目数据的准确性', status: '优秀', actionDate: '2023-10-03' },
+  { name: '绿色建筑数据', value: 100, description: '绿色建筑数据的准确性', status: '优秀', actionDate: '2023-10-04' },
+  { name: '清洁能源投资数据', value: 100, description: '清洁能源投资数据的准确性', status: '优秀', actionDate: '2023-10-05' },
+  { name: '碳足迹管理数据', value: 100, description: '碳足迹管理数据的准确性', status: '优秀', actionDate: '2023-10-06' },
+  { name: '环境管理体系认证数据', value: 100, description: '环境管理体系认证数据的准确性', status: '优秀', actionDate: '2023-10-07' },
+  { name: '能源审计报告数据', value: 100, description: '能源审计报告数据的准确性', status: '优秀', actionDate: '2023-10-08' },
+  { name: '碳排放核查报告数据', value: 100, description: '碳排放核查报告数据的准确性', status: '优秀', actionDate: '2023-10-09' },
+  { name: '节能减排措施实施数据', value: 100, description: '节能减排措施实施数据的准确性', status: '优秀', actionDate: '2023-10-10' }
+]
 
-<style scoped lang="scss">
+const completenessChart = ref(null)
+const timelinessChart = ref(null)
+const accuracyChart = ref(null)
+
+const getStatusType = (status) => {
+  switch (status) {
+    case '正常':
+      return 'info'
+    case '良好':
+      return 'success'
+    case '优秀':
+      return 'primary'
+    default:
+      return 'warning'
+  }
+}
+
+const initChart = (chartRef, title, data, chartType) => {
+  const chart = echarts.init(chartRef.value)
+  let option = {}
+  switch (chartType) {
+    case 'bar':
+      option = {
+        title: {
+          text: title
+        },
+        tooltip: {},
+        xAxis: {
+          data: data.map(item => item.name)
+        },
+        yAxis: {},
+        series: [{
+          name: '评分',
+          type: 'bar',
+          data: data.map(item => item.value)
+        }]
+      }
+      break
+    case 'pie':
+      option = {
+        title: {
+          text: title
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left'
+        },
+        series: [{
+          name: '评分',
+          type: 'pie',
+          radius: '50%',
+          data: data.map(item => ({ name: item.name, value: item.value })),
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }]
+      }
+      break
+    case 'line':
+      option = {
+        title: {
+          text: title
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          data: data.map(item => item.name)
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          name: '评分',
+          type: 'line',
+          data: data.map(item => item.value)
+        }]
+      }
+      break
+  }
+  chart.setOption(option)
+}
+
+const exportData = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在导出数据...',
+    background: 'rgba(0, 0, 0, 0.7)',
+  })
+
+  setTimeout(() => {
+    loading.close()
+    ElMessage.success('数据导出成功')
+  }, 2000)
+}
+
+onMounted(() => {
+  initChart(completenessChart, '指标完整性', completenessData, 'bar')
+  initChart(timelinessChart, '上报及时性', timelinessData, 'pie')
+  initChart(accuracyChart, '数据准确性', accuracyData, 'line')
+})
+
+watch(activeName, (newVal) => {
+  if (newVal === 'completeness') {
+    initChart(completenessChart, '指标完整性', completenessData, 'bar')
+  } else if (newVal === 'timeliness') {
+    initChart(timelinessChart, '上报及时性', timelinessData, 'pie')
+  } else if (newVal === 'accuracy') {
+    initChart(accuracyChart, '数据准确性', accuracyData, 'line')
+  }
+})
+</script>
 
-</style>
+<style scoped>
+.assessment-module {
+  padding: 20px;
+}
+</style>

src/views/d/aa/index.vue

@@ -1,11 +1,229 @@
+<template>
+  <div class="carbon-footprint-module">
+    <el-header class="header">
+      <h2>碳足迹评估认证模块</h2>
+    </el-header>
+    <el-main>
+      <el-tabs v-model="activeTab">
+        <el-tab-pane label="产品模型库" name="productLibrary">
+          <h3>产品模型库</h3>
+          <el-input v-model="searchQuery" placeholder="搜索产品" style="margin-bottom: 20px;" />
+          <el-select v-model="selectedIndustry" placeholder="请选择行业" style="margin-bottom: 20px;">
+            <el-option
+                v-for="industry in industries"
+                :key="industry.value"
+                :label="industry.label"
+                :value="industry.value"
+            />
+          </el-select>
+          <el-table :data="filteredProducts" style="width: 100%" @row-click="showProductDetails">
+            <el-table-column prop="name" label="产品名称" />
+            <el-table-column prop="description" label="描述" />
+            <el-table-column prop="carbonFootprint" label="碳足迹" />
+          </el-table>
+          <el-dialog v-model="productDialogVisible" title="产品详细信息">
+            <p><strong>产品名称:</strong> {{ selectedProduct.name }}</p>
+            <p><strong>描述:</strong> {{ selectedProduct.description }}</p>
+            <p><strong>碳足迹:</strong> {{ selectedProduct.carbonFootprint }} kg CO2e</p>
+          </el-dialog>
+        </el-tab-pane>
+        <el-tab-pane label="工序积木图" name="processDiagram">
+          <h3>工序积木图</h3>
+          <el-select v-model="selectedIndustry" placeholder="请选择行业" style="margin-bottom: 20px;">
+            <el-option
+                v-for="industry in industries"
+                :key="industry.value"
+                :label="industry.label"
+                :value="industry.value"
+            />
+          </el-select>
+          <div ref="processChart" style="width: 100%; height: 400px;"></div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-main>
+  </div>
+</template>
+
 <script setup>
+import { ref, onMounted, watch, computed } from 'vue'
+import * as echarts from 'echarts'
+import { ElHeader, ElMain, ElSelect, ElOption, ElTable, ElTableColumn, ElTabs, ElTabPane, ElInput, ElDialog } from 'element-plus'
+
+const activeTab = ref('productLibrary')
+const selectedIndustry = ref('')
+const searchQuery = ref('')
+const productDialogVisible = ref(false)
+const selectedProduct = ref({})
+
+const industries = [
+  { label: '钢铁', value: 'steel' },
+  { label: '水泥', value: 'cement' },
+  { label: '动力电池', value: 'battery' }
+]
+
+const industryData = {
+  steel: [
+    { name: '高炉炼铁', description: '高炉炼铁过程', carbonFootprint: 1.5 },
+    { name: '电炉炼钢', description: '电炉炼钢过程', carbonFootprint: 0.8 },
+    { name: '轧钢', description: '轧钢过程', carbonFootprint: 0.5 },
+    { name: '热处理', description: '钢材热处理过程', carbonFootprint: 0.6 },
+    { name: '冷轧', description: '冷轧过程', carbonFootprint: 0.4 },
+    { name: '涂层', description: '钢材表面涂层过程', carbonFootprint: 0.3 },
+    { name: '检验', description: '钢材质量检验过程', carbonFootprint: 0.2 },
+    { name: '包装', description: '钢材包装过程', carbonFootprint: 0.1 }
+  ],
+  cement: [
+    { name: '石灰石开采', description: '石灰石开采过程', carbonFootprint: 0.3 },
+    { name: '熟料烧成', description: '熟料烧成过程', carbonFootprint: 1.2 },
+    { name: '水泥粉磨', description: '水泥粉磨过程', carbonFootprint: 0.4 },
+    { name: '包装', description: '水泥包装过程', carbonFootprint: 0.2 },
+    { name: '运输', description: '水泥运输过程', carbonFootprint: 0.1 },
+    { name: '存储', description: '水泥存储过程', carbonFootprint: 0.1 },
+    { name: '检验', description: '水泥质量检验过程', carbonFootprint: 0.2 },
+    { name: '销售', description: '水泥销售过程', carbonFootprint: 0.1 }
+  ],
+  battery: [
+    { name: '锂矿开采', description: '锂矿开采过程', carbonFootprint: 0.5 },
+    { name: '正极材料生产', description: '正极材料生产过程', carbonFootprint: 1.0 },
+    { name: '负极材料生产', description: '负极材料生产过程', carbonFootprint: 0.8 },
+    { name: '电解液制备', description: '电解液制备过程', carbonFootprint: 0.6 },
+    { name: '电池组装', description: '电池组装过程', carbonFootprint: 0.7 },
+    { name: '性能测试', description: '电池性能测试过程', carbonFootprint: 0.3 },
+    { name: '包装', description: '电池包装过程', carbonFootprint: 0.2 },
+    { name: '运输', description: '电池运输过程', carbonFootprint: 0.1 }
+  ]
+}
+
+const filteredProducts = computed(() => {
+  const query = searchQuery.value.toLowerCase()
+  return selectedIndustry.value
+      ? industryData[selectedIndustry.value].filter(product =>
+          product.name.toLowerCase().includes(query) ||
+          product.description.toLowerCase().includes(query) ||
+          product.carbonFootprint.toString().includes(query)
+      )
+      : []
+})
+
+const processChart = ref(null)
 
+const initProcessChart = () => {
+  const chart = echarts.init(processChart.value)
+  const option = {
+    title: {
+      text: '工序积木图',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: function (params) {
+        if (params.seriesType === 'sankey') {
+          if (params.dataType === 'node') {
+            const product = filteredProducts.value.find(p => p.name === params.name)
+            return `<strong>${product.name}</strong><br>碳足迹: ${product.carbonFootprint} kg CO2e<br>描述: ${product.description}`
+          } else if (params.dataType === 'edge') {
+            const sourceProduct = filteredProducts.value.find(p => p.name === params.data.source)
+            const targetProduct = filteredProducts.value.find(p => p.name === params.data.target)
+            return `${sourceProduct.name} -> ${targetProduct.name}<br>碳足迹: ${params.data.value} kg CO2e`
+          }
+        }
+        return ''
+      }
+    },
+    legend: {
+      data: ['低', '中', '高'],
+      top: 'bottom'
+    },
+    series: [
+      {
+        type: 'sankey',
+        layout: 'none',
+        data: filteredProducts.value.map(product => ({
+          name: product.name,
+          itemStyle: {
+            color: getColorForCarbonFootprint(product.carbonFootprint)
+          }
+        })),
+        links: filteredProducts.value.map((product, index) => ({
+          source: index === 0 ? '原料' : product.name,
+          target: index === filteredProducts.value.length - 1 ? '成品' : filteredProducts.value[index + 1].name,
+          value: product.carbonFootprint,
+          lineStyle: {
+            color: 'source'
+          }
+        })),
+        lineStyle: {
+          curveness: 0.5
+        },
+        emphasis: {
+          focus: 'adjacency'
+        }
+      }
+    ]
+  }
+  chart.setOption(option)
+
+  // 直接设置高亮
+  if (selectedIndustry.value) {
+    chart.dispatchAction({
+      type: 'highlight',
+      seriesIndex: 0,
+      dataIndex: 0
+    })
+  }
+
+  // 添加点击事件
+  chart.on('click', (params) => {
+    if (params.dataType === 'node') {
+      const product = filteredProducts.value.find(p => p.name === params.name)
+      if (product) {
+        selectedProduct.value = product
+        productDialogVisible.value = true
+      }
+    }
+  })
+}
+
+const getColorForCarbonFootprint = (carbonFootprint) => {
+  if (carbonFootprint < 0.5) return '#67C23A' // 绿色
+  if (carbonFootprint < 1.0) return '#E6A23C' // 橙色
+  return '#F56C6C' // 红色
+}
+
+watch(selectedIndustry, (newVal) => {
+  if (newVal && activeTab.value === 'processDiagram') {
+    initProcessChart()
+  }
+})
+
+onMounted(() => {
+  if (selectedIndustry.value && activeTab.value === 'processDiagram') {
+    initProcessChart()
+  }
+})
+
+const showProductDetails = (row) => {
+  selectedProduct.value = row
+  productDialogVisible.value = true
+}
 </script>
 
-<template>
-  <div>ertretertert</div>
-</template>
+<style scoped>
+.carbon-footprint-module {
+  display: flex;
+  flex-direction: column;
+  height: 90vh;
+}
 
-<style scoped lang="scss">
+.header {
+  background-color: #409eff;
+  color: white;
+  text-align: center;
+  padding: 10px 0;
+}
 
-</style>
+.main {
+  flex: 1;
+  padding: 20px;
+}
+</style>

src/views/e/aa/data.js

@@ -0,0 +1,93 @@
+// src/data.js
+export const knowledgeBase = [
+    {
+        id: 1,
+        title: '中国碳达峰、碳中和目标解析',
+        summary: '解读中国碳达峰、碳中和目标的具体内容和实施路径。',
+        content: '中国承诺在2030年前实现碳达峰，2060年前实现碳中和。这一目标的实现需要多方面的努力，包括调整能源结构、提高能效、发展可再生能源、推广绿色交通、加强森林碳汇等。具体措施包括：1. 推动煤炭消费尽早达峰；2. 大力发展风电、太阳能发电等可再生能源；3. 加强工业、建筑、交通等领域的节能减排；4. 推动碳市场建设，完善碳定价机制；5. 加强国际合作，共同应对气候变化。',
+        source: '新华网',
+        keywords: ['碳达峰', '碳中和', '目标', '解析'],
+        date: '2023-01-01'
+    },
+    {
+        id: 2,
+        title: '碳排放权交易市场建设进展',
+        summary: '介绍全国碳排放权交易市场的建设进展和未来规划。',
+        content: '全国碳排放权交易市场于2021年7月16日正式启动，首批纳入发电行业2000多家重点排放单位。截至2022年底，累计成交量超过2亿吨，成交金额超过80亿元。未来，碳市场将逐步扩大覆盖范围，纳入钢铁、化工、建材等行业，完善交易机制，提高市场透明度和流动性。同时，还将推动碳金融产品创新，为碳减排提供更多的金融支持。',
+        source: '生态环境部',
+        keywords: ['碳排放权', '交易市场', '建设', '进展'],
+        date: '2023-01-02'
+    },
+    {
+        id: 3,
+        title: '绿色金融支持碳减排',
+        summary: '探讨绿色金融在支持碳减排方面的作用和实践案例。',
+        content: '绿色金融是指为支持环境改善、应对气候变化和资源节约高效利用的经济活动提供的金融服务。近年来，中国绿色金融体系不断完善，绿色信贷、绿色债券、绿色基金等产品快速发展。例如，某商业银行推出绿色信贷产品，支持清洁能源项目建设；某保险公司开发绿色保险产品，为绿色企业提供风险保障。绿色金融在推动碳减排、促进经济可持续发展方面发挥了重要作用。',
+        source: '中国人民银行',
+        keywords: ['绿色金融', '碳减排', '支持', '实践案例'],
+        date: '2023-01-03'
+    },
+    {
+        id: 4,
+        title: '碳捕集与封存技术进展',
+        summary: '总结当前碳捕集与封存技术的研究进展和应用前景。',
+        content: '碳捕集与封存（CCS）技术是一种将工业生产过程中产生的二氧化碳捕集并储存起来的技术，以减少温室气体排放。目前，CCS技术已经在多个国家和地区开展试点项目，取得了一定的进展。主要研究方向包括：1. 捕集技术优化；2. 封存技术改进；3. 成本降低。未来，随着技术进步和政策支持，CCS技术有望在更大范围内推广应用，成为实现碳中和目标的重要手段。',
+        source: '科技部',
+        keywords: ['碳捕集', '封存', '技术进展', '应用前景'],
+        date: '2023-01-04'
+    },
+    {
+        id: 5,
+        title: '碳足迹评估方法',
+        summary: '介绍碳足迹评估的基本方法和应用场景。',
+        content: '碳足迹是指某个产品、组织或活动在其生命周期内直接和间接产生的温室气体排放总量。碳足迹评估方法主要包括生命周期评估（LCA）、投入产出分析（IOA）等。通过碳足迹评估，可以识别减排潜力，制定减排策略。例如，某企业通过碳足迹评估发现其生产过程中的能源消耗是主要排放源，于是采取措施提高能效，减少碳排放。碳足迹评估在企业管理和政策制定中具有重要意义。',
+        source: '中国科学院',
+        keywords: ['碳足迹', '评估', '方法', '应用场景'],
+        date: '2023-01-05'
+    },
+    {
+        id: 6,
+        title: '碳中和背景下的能源转型',
+        summary: '探讨碳中和背景下能源转型的必要性和路径。',
+        content: '碳中和目标要求能源系统进行深刻转型，从高碳能源向低碳、无碳能源转变。主要路径包括：1. 发展可再生能源，如风能、太阳能、水能等；2. 提高能源利用效率，减少能源浪费；3. 推动电气化，特别是在交通和建筑领域；4. 发展氢能等新型清洁能源。能源转型不仅有助于减少温室气体排放，还能促进经济发展和能源安全。',
+        source: '国家能源局',
+        keywords: ['碳中和', '能源转型', '必要性', '路径'],
+        date: '2023-01-06'
+    },
+    {
+        id: 7,
+        title: '碳中和对经济的影响',
+        summary: '分析碳中和目标对中国经济的影响和机遇。',
+        content: '碳中和目标将对中国经济产生深远影响。短期内，可能会增加部分企业的成本，但长期来看，将带来新的经济增长点和就业机会。例如，可再生能源、电动汽车、绿色建筑等产业将迎来快速发展。此外，碳中和还将推动技术创新，提升国际竞争力。政府和企业应积极应对挑战，抓住机遇，实现经济绿色转型。',
+        source: '国家统计局',
+        keywords: ['碳中和', '经济', '影响', '机遇'],
+        date: '2023-01-07'
+    },
+    {
+        id: 8,
+        title: '碳中和与城市绿色发展',
+        summary: '探讨碳中和目标下城市绿色发展的路径和实践。',
+        content: '城市是碳排放的主要来源之一，实现碳中和目标需要城市的积极参与。主要路径包括：1. 发展绿色交通，推广公共交通和新能源汽车；2. 建设绿色建筑，提高建筑能效；3. 发展循环经济，减少资源浪费；4. 增加绿化面积，提升城市生态质量。许多城市已经开展了绿色发展的实践，取得了显著成效，为其他城市提供了宝贵经验。',
+        source: '住房和城乡建设部',
+        keywords: ['碳中和', '城市', '绿色发展', '路径', '实践'],
+        date: '2023-01-08'
+    },
+    {
+        id: 9,
+        title: '碳中和与农业减排',
+        summary: '探讨碳中和目标下农业减排的措施和前景。',
+        content: '农业是重要的碳排放源之一，实现碳中和目标需要农业部门的积极参与。主要措施包括：1. 改进种植和养殖技术，减少甲烷和氧化亚氮排放；2. 发展有机农业，减少化肥和农药使用；3. 推广农业废弃物资源化利用，减少焚烧和填埋；4. 发展农业碳汇，增加土壤碳储量。这些措施不仅有助于减少温室气体排放，还能提高农业生产的可持续性。',
+        source: '农业农村部',
+        keywords: ['碳中和', '农业', '减排', '措施', '前景'],
+        date: '2023-01-09'
+    },
+    {
+        id: 10,
+        title: '碳中和与国际合作',
+        summary: '分析碳中和目标下国际合作的重要性及现状。',
+        content: '气候变化是全球性问题，实现碳中和目标需要各国共同努力。中国积极参与国际气候治理，与其他国家在技术、资金、政策等方面开展合作。例如，中国与欧盟在碳市场建设、可再生能源发展等领域进行了广泛合作。国际合作不仅有助于应对气候变化，还能促进全球经济复苏和发展。未来，中国将继续深化国际合作，为全球碳中和目标贡献力量。',
+        source: '外交部',
+        keywords: ['碳中和', '国际合作', '重要性', '现状'],
+        date: '2023-01-10'
+    }
+];

src/views/e/aa/index.vue

@@ -1 +1,137 @@
-<template>12313213221321312312312312312</template>
+<template>
+  <div class="knowledge-base-module">
+    <el-header class="header">
+      <h2>双碳政策知识库</h2>
+    </el-header>
+    <el-main>
+      <el-input
+          v-model="searchQuery"
+          placeholder="请输入文章关键词"
+          style="margin-bottom: 20px;"
+          @input="performSearch"
+      >
+        <template #append>
+          <el-button icon="el-icon-search" @click="performSearch"></el-button>
+        </template>
+      </el-input>
+      <el-select v-model="selectedKeyword" placeholder="选择关键词" style="margin-bottom: 20px;" @change="performSearch">
+        <el-option label="全部" value="" />
+        <el-option v-for="keyword in uniqueKeywords" :key="keyword" :label="keyword" :value="keyword" />
+      </el-select>
+      <el-select v-model="sortField" placeholder="排序方式" style="margin-bottom: 20px;">
+        <el-option label="按标题排序" value="title" />
+        <el-option label="按内容摘要排序" value="summary" />
+        <el-option label="按政策来源排序" value="source" />
+        <el-option label="按日期排序" value="date" />
+      </el-select>
+      <el-table :data="paginatedResults" style="width: 100%">
+        <el-table-column prop="title" label="文件标题" />
+        <el-table-column prop="summary" label="内容摘要" />
+        <el-table-column prop="content" label="详细内容" />
+        <el-table-column prop="source" label="政策来源" />
+        <el-table-column prop="date" label="发布日期" />
+        <el-table-column label="关键词">
+          <template #default="scope">
+            <el-tag v-for="keyword in scope.row.keywords" :key="keyword" type="success" style="margin-right: 5px;">
+              {{ keyword }}
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[5, 10, 20, 50]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          style="margin-top: 20px;"
+      />
+    </el-main>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { ElHeader, ElMain, ElInput, ElButton, ElSelect, ElOption, ElTable, ElTableColumn, ElPagination, ElTag } from 'element-plus'
+import { knowledgeBase } from './data.js'
+
+const searchQuery = ref('')
+const selectedKeyword = ref('')
+const sortField = ref('title')
+const results = ref(knowledgeBase)
+const pageSize = ref(5)
+const currentPage = ref(1)
+const total = ref(knowledgeBase.length)
+
+const uniqueKeywords = computed(() => {
+  const allKeywords = knowledgeBase.flatMap(item => item.keywords)
+  return [...new Set(allKeywords)]
+})
+
+const performSearch = () => {
+  const queryWords = searchQuery.value.split(/\s+/).filter(word => word.trim() !== '')
+  results.value = knowledgeBase.filter(item => {
+    return queryWords.every(word => {
+      return (
+          item.title.toLowerCase().includes(word.toLowerCase()) ||
+          item.summary.toLowerCase().includes(word.toLowerCase()) ||
+          item.content.toLowerCase().includes(word.toLowerCase()) ||
+          item.source.toLowerCase().includes(word.toLowerCase()) ||
+          item.date.toLowerCase().includes(word.toLowerCase()) ||
+          item.keywords.some(keyword => keyword.toLowerCase().includes(word.toLowerCase()))
+      )
+    }) && (!selectedKeyword.value || item.keywords.includes(selectedKeyword.value))
+  })
+  total.value = results.value.length
+  currentPage.value = 1
+}
+
+const sortedResults = computed(() => {
+  return results.value.sort((a, b) => {
+    if (a[sortField.value] < b[sortField.value]) return -1
+    if (a[sortField.value] > b[sortField.value]) return 1
+    return 0
+  })
+})
+
+const paginatedResults = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  const end = start + pageSize.value
+  return sortedResults.value.slice(start, end)
+})
+
+const handleSizeChange = (newPageSize) => {
+  pageSize.value = newPageSize
+  currentPage.value = 1
+}
+
+const handleCurrentChange = (newPage) => {
+  currentPage.value = newPage
+}
+
+onMounted(() => {
+  performSearch()
+})
+</script>
+
+<style scoped>
+.knowledge-base-module {
+  display: flex;
+  flex-direction: column;
+  height: 90vh;
+}
+
+.header {
+  background-color: #409eff;
+  color: white;
+  text-align: center;
+  padding: 10px 0;
+}
+
+.main {
+  flex: 1;
+  padding: 20px;
+}
+</style>