双碳平台静态页面提交

src/views/b/aa/NewPage.vue

@@ -55,15 +55,18 @@
         </template>
         <template #default>
           <el-form>
-            <el-form-item label="无烟煤(吨)">
+            <el-form-item label="厡煤">
               <el-input v-model="form2.a"/>
             </el-form-item>
-            <el-form-item label="烟煤(吨)">
+            <el-form-item label="洗精煤">
               <el-input v-model="form2.b"/>
             </el-form-item>
-            <el-form-item label="原煤(吨)">
+            <el-form-item label="洗中煤，煤泥">
               <el-input v-model="form2.c"/>
             </el-form-item>
+            <el-form-item label="焦炭">
+              <el-input v-model="form2.dd"/>
+            </el-form-item>
           </el-form>
         </template>
       </el-card>
@@ -75,7 +78,23 @@
           </div>
         </template>
         <template #default>
-          <el-empty></el-empty>
+          <el-form>
+            <el-form-item label="厡油">
+              <el-input v-model="form2.sda"/>
+            </el-form-item>
+            <el-form-item label="重油">
+              <el-input v-model="form2.zxc"/>
+            </el-form-item>
+            <el-form-item label="煤油">
+              <el-input v-model="form2.asdf"/>
+            </el-form-item>
+            <el-form-item label="汽油">
+              <el-input v-model="form2.fg"/>
+            </el-form-item>
+            <el-form-item label="柴油">
+              <el-input v-model="form2.fg"/>
+            </el-form-item>
+          </el-form>
         </template>
       </el-card>
       <el-card style="flex: 1;">
@@ -86,7 +105,14 @@
           </div>
         </template>
         <template #default>
-          <el-empty/>
+          <el-form>
+            <el-form-item label="油田天然气">
+              <el-input v-model="form2.jh"/>
+            </el-form-item>
+            <el-form-item label="气田天然气">
+              <el-input v-model="form2.we"/>
+            </el-form-item>
+          </el-form>
         </template>
       </el-card>
       <el-card style="flex: 1;">

src/views/b/aa/NewPage2.vue

@@ -36,27 +36,27 @@ import {Search} from "@element-plus/icons-vue";
             </el-checkbox>
             <el-checkbox>
               <template #default>
-                无烟煤
+                烟煤
               </template>
             </el-checkbox>
             <el-checkbox>
               <template #default>
-                无烟煤
+                褐煤
               </template>
             </el-checkbox>
             <el-checkbox>
               <template #default>
-                无烟煤
+                洗精煤
               </template>
             </el-checkbox>
             <el-checkbox>
               <template #default>
-                无烟煤
+                型煤
               </template>
             </el-checkbox>
             <el-checkbox>
               <template #default>
-                无烟煤
+                焦炭
               </template>
             </el-checkbox>
             <el-checkbox>

src/views/b/aa/index.vue

@@ -6,20 +6,20 @@
           <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 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 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 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 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 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
@@ -33,6 +33,17 @@
                 <el-button type="primary" @click="saveConfig">保存配置</el-button>
               </el-form>
             </div>
+            <el-card shadow="hover" style="margin-top: 20px;">
+              <div slot="header">
+                <span>情景分析</span>
+              </div>
+              <el-table :data="scenarioData" style="width: 100%">
+                <el-table-column prop="carbonEmission1" label="" width="150"></el-table-column>
+                <el-table-column prop="renewableEnergyRatio1" label="情景1" width="150"></el-table-column>
+<!--                <el-table-column prop="carbonEmission2" label="碳排放 (情景2)" width="150"></el-table-column>-->
+                <el-table-column prop="renewableEnergyRatio2" label="情景2" width="150"></el-table-column>
+              </el-table>
+            </el-card>
           </el-aside>
           <el-main style="flex: 1; display: block; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
             <h2>碳排放形势预测分析</h2>
@@ -148,6 +159,11 @@ const futureData = ref([
   { year: '2029', predictedEmission: 1900 }
 ]);
 
+const scenarioData = ref([
+  { carbonEmission1: '碳排放', renewableEnergyRatio1: '1100 吨', carbonEmission2: '1100 吨', renewableEnergyRatio2: '1200 吨' },
+  { carbonEmission1: '再生能源比例', renewableEnergyRatio1: '32%', carbonEmission2: '1200 吨', renewableEnergyRatio2: '37%' }
+]);
+
 const saveConfig = () => {
   formRef.value.validate((valid) => {
     if (valid) {

src/views/b/ab/index.vue

@@ -1,8 +1,8 @@
 <template>
   <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>
+<!--    <el-header style="text-align: right; margin-bottom: 20px;">-->
+<!--      <el-button type="primary" @click="toggleChartType">切换图表类型</el-button>-->
+<!--    </el-header>-->
     <el-main style="height: calc(100% - 60px);">
       <el-tabs v-model="activeTab" type="card" style="height: 100%;">
         <el-tab-pane label="碳排放趋势分析" name="trend-analysis">
@@ -24,6 +24,18 @@
               </el-card>
             </el-col>
           </el-row>
+          <el-row :gutter="20" style="margin-top: 20px;">
+            <el-col :span="12">
+              <el-card style="height: 100%;">
+                <div id="national-power-generation" style="width: 100%; height: 400px;"></div>
+              </el-card>
+            </el-col>
+            <el-col :span="12">
+              <el-card style="height: 100%;">
+                <div id="national-installed-capacity" style="width: 100%; height: 400px;"></div>
+              </el-card>
+            </el-col>
+          </el-row>
         </el-tab-pane>
         <el-tab-pane label="数据分析报告" name="report">
           <h1>数据分析报告</h1>
@@ -117,6 +129,8 @@ import html2pdf from 'html2pdf.js';
 
 const activeTab = ref('trend-analysis');
 const chart = ref(null);
+const nationalPowerGenerationChart = ref(null);
+const nationalInstalledCapacityChart = ref(null);
 const chartType = ref('line');
 const tableData = ref([
   { year: '2015', emission: 120, energy: 220 },
@@ -131,11 +145,47 @@ const tableData = ref([
   { year: '2024', emission: 180, energy: 300 }  // 预测数据
 ]);
 
+const nationalPowerGenerationData = ref([
+  { year: '2015', power: 4800 },
+  { year: '2016', power: 5400 },
+  { year: '2017', power: 4900 },
+  { year: '2018', power: 5600 },
+  { year: '2019', power: 5100 },
+  { year: '2020', power: 6000 },
+  { year: '2021', power: 5300 },
+  { year: '2022', power: 6500 },
+  { year: '2023', power: 5500 },
+  { year: '2024', power: 6800 }
+]);
+
+const nationalInstalledCapacityData = ref([
+  { year: '2015', coal: 4315, hydro: 2150, wind: 1075, solar: 525, nuclear: 315, other: 210 },
+  { year: '2016', coal: 4633, hydro: 2275, wind: 1150, solar: 575, nuclear: 345, other: 230 },
+  { year: '2017', coal: 4255, hydro: 2325, wind: 1250, solar: 625, nuclear: 375, other: 245 },
+  { year: '2018', coal: 4580, hydro: 2450, wind: 1350, solar: 675, nuclear: 405, other: 270 },
+  { year: '2019', coal: 4790, hydro: 2525, wind: 1450, solar: 725, nuclear: 435, other: 290 },
+  { year: '2020', coal: 5120, hydro: 2650, wind: 1550, solar: 775, nuclear: 465, other: 310 },
+  { year: '2021', coal: 5340, hydro: 2775, wind: 1650, solar: 825, nuclear: 495, other: 330 },
+  { year: '2022', coal: 5560, hydro: 2875, wind: 1750, solar: 875, nuclear: 525, other: 350 },
+  { year: '2023', coal: 5780, hydro: 2975, wind: 1850, solar: 925, nuclear: 555, other: 370 },
+  { year: '2024', coal: 5990, hydro: 3075, wind: 1950, solar: 975, nuclear: 585, other: 390 }
+]);
+
 const initChart = () => {
   chart.value = echarts.init(document.getElementById('chart'));
   updateChart();
 };
 
+const initNationalPowerGenerationChart = () => {
+  nationalPowerGenerationChart.value = echarts.init(document.getElementById('national-power-generation'));
+  updateNationalPowerGenerationChart();
+};
+
+const initNationalInstalledCapacityChart = () => {
+  nationalInstalledCapacityChart.value = echarts.init(document.getElementById('national-installed-capacity'));
+  updateNationalInstalledCapacityChart();
+};
+
 const updateChart = () => {
   const option = {
     title: {
@@ -194,13 +244,19 @@ const updateChart = () => {
         name: '碳排放量',
         type: chartType.value,
         data: tableData.value.map(item => item.emission),
-        areaStyle: {}
+        areaStyle: {},
+        itemStyle: {
+          color: '#FF6347' // 修改为橙红色
+        }
       },
       {
         name: '能源消耗',
         type: chartType.value,
         data: tableData.value.map(item => item.energy),
-        areaStyle: {}
+        areaStyle: {},
+        itemStyle: {
+          color: '#4682B4' // 修改为钢蓝色
+        }
       }
     ]
   };
@@ -218,6 +274,9 @@ const updateChart = () => {
             shadowOffsetX: 0,
             shadowColor: 'rgba(0, 0, 0, 0.5)'
           }
+        },
+        itemStyle: {
+          color: '#FF6347' // 修改为橙红色
         }
       },
       {
@@ -231,6 +290,9 @@ const updateChart = () => {
             shadowOffsetX: 0,
             shadowColor: 'rgba(0, 0, 0, 0.5)'
           }
+        },
+        itemStyle: {
+          color: '#4682B4' // 修改为钢蓝色
         }
       }
     ];
@@ -239,13 +301,243 @@ const updateChart = () => {
   chart.value.setOption(option);
 };
 
-const toggleChartType = () => {
-  const types = ['line', 'bar', 'pie'];
-  const currentIndex = types.indexOf(chartType.value);
-  chartType.value = types[(currentIndex + 1) % types.length];
-  updateChart();
+const updateNationalPowerGenerationChart = () => {
+  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: nationalPowerGenerationData.value.map(item => item.year),
+        axisLabel: {
+          interval: 0,
+          rotate: 45
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '发电量 (亿千瓦时)',
+        min: 0,
+        max: 7000,
+        interval: 1000,
+        axisLabel: {
+          formatter: '{value} '
+        }
+      }
+    ],
+    series: [
+      {
+        name: '火电',
+        type: 'line',
+        data: [3000.5, 3101.2, 3202.8, 3153.4, 3304.1, 3405.7, 3506.3, 3607.9, 3708.5, 3809.1, 3910.7, 4011.3, 4112.9, 4053.5, 4204.1, 4305.7],
+        areaStyle: {},
+        itemStyle: {
+          color: '#FF4500' // 橙色
+        }
+      },
+      {
+        name: '水电',
+        type: 'line',
+        data: [1000.1, 1101.2, 1202.3, 1153.4, 1304.5, 1405.6, 1506.7, 1607.8, 1708.9, 1809.0, 1910.1, 2011.2, 2112.3, 2053.4, 2204.5, 2305.6],
+        areaStyle: {},
+        itemStyle: {
+          color: '#00BFFF' // 蓝色
+        }
+      },
+      {
+        name: '风电',
+        type: 'line',
+        data: [500.1, 551.2, 602.3, 575.4, 650.5, 701.6, 752.7, 803.8, 854.9, 905.0, 956.1, 1007.2, 1058.3, 1029.4, 1100.5, 1151.6],
+        areaStyle: {},
+        itemStyle: {
+          color: '#32CD32' // 绿色
+        }
+      },
+      {
+        name: '太阳能',
+        type: 'line',
+        data: [300.1, 351.2, 402.3, 375.4, 450.5, 501.6, 552.7, 603.8, 654.9, 705.0, 756.1, 807.2, 858.3, 829.4, 900.5, 951.6],
+        areaStyle: {},
+        itemStyle: {
+          color: '#FFD700' // 黄色
+        }
+      },
+      {
+        name: '核能',
+        type: 'line',
+        data: [200.1, 251.2, 302.3, 275.4, 350.5, 401.6, 452.7, 503.8, 554.9, 605.0, 656.1, 707.2, 758.3, 729.4, 800.5, 851.6],
+        areaStyle: {},
+        itemStyle: {
+          color: '#8A2BE2' // 紫色
+        }
+      },
+      {
+        name: '其他能源',
+        type: 'line',
+        data: [100.1, 151.2, 202.3, 175.4, 250.5, 301.6, 352.7, 403.8, 454.9, 505.0, 556.1, 607.2, 658.3, 629.4, 700.5, 751.6],
+        areaStyle: {},
+        itemStyle: {
+          color: '#FF69B4' // 粉红色
+        }
+      }
+    ]
+  };
+
+  nationalPowerGenerationChart.value.setOption(option);
 };
 
+const updateNationalInstalledCapacityChart = () => {
+  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: nationalInstalledCapacityData.value.map(item => item.year),
+        axisLabel: {
+          interval: 0,
+          rotate: 45
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '装机容量 (万千瓦)',
+        min: 0,
+        max: 15000,
+        interval: 2000,
+        axisLabel: {
+          formatter: '{value} '
+        }
+      }
+    ],
+    series: [
+      {
+        name: '火电',
+        type: 'line',
+        data: nationalInstalledCapacityData.value.map(item => item.coal),
+        areaStyle: {},
+        itemStyle: {
+          color: '#ffd456' // 橙色
+        }
+      },
+      {
+        name: '水电',
+        type: 'line',
+        data: nationalInstalledCapacityData.value.map(item => item.hydro),
+        areaStyle: {},
+        itemStyle: {
+          color: '#346cff' // 蓝色
+        }
+      },
+      {
+        name: '风电',
+        type: 'line',
+        data: nationalInstalledCapacityData.value.map(item => item.wind),
+        areaStyle: {},
+        itemStyle: {
+          color: '#48d648' // 绿色
+        }
+      },
+      {
+        name: '太阳能',
+        type: 'line',
+        data: nationalInstalledCapacityData.value.map(item => item.solar),
+        areaStyle: {},
+        itemStyle: {
+          color: '#ff3c00' // 黄色
+        }
+      },
+      {
+        name: '核能',
+        type: 'line',
+        data: nationalInstalledCapacityData.value.map(item => item.nuclear),
+        areaStyle: {},
+        itemStyle: {
+          color: '#8100fa' // 紫色
+        }
+      },
+      {
+        name: '其他能源',
+        type: 'line',
+        data: nationalInstalledCapacityData.value.map(item => item.other),
+        areaStyle: {},
+        itemStyle: {
+          color: '#ff0080' // 粉红色
+        }
+      }
+    ]
+  };
+
+  nationalInstalledCapacityChart.value.setOption(option);
+};
+
+// const toggleChartType = () => {
+//   const types = ['line', 'bar', 'pie'];
+//   const currentIndex = types.indexOf(chartType.value);
+//   chartType.value = types[(currentIndex + 1) % types.length];
+//   updateChart();
+//   updateNationalPowerGenerationChart();
+//   updateNationalInstalledCapacityChart();
+// };
+
 const downloadReport = () => {
   const element = document.querySelector('.el-tab-pane[name="report"]');
   html2pdf().from(element).save('数据分析报告.pdf');
@@ -254,16 +546,25 @@ const downloadReport = () => {
 
 onMounted(() => {
   initChart();
+  initNationalPowerGenerationChart();
+  initNationalInstalledCapacityChart();
 });
 
 onBeforeUnmount(() => {
   if (chart.value) {
     chart.value.dispose();
   }
+  if (nationalPowerGenerationChart.value) {
+    nationalPowerGenerationChart.value.dispose();
+  }
+  if (nationalInstalledCapacityChart.value) {
+    nationalInstalledCapacityChart.value.dispose();
+  }
 });
 </script>
 
 
+
 <style scoped>
 .el-main {
   padding: 20px;

src/views/c/aa/index.vue

@@ -27,11 +27,11 @@
       </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 :data="tableData" style="width: 100%;" :default-sort="{prop: 'name', order: 'ascending'}">
+            <el-table-column prop="name" label="企业名称" width="180" sortable></el-table-column>
+            <el-table-column prop="energy" label="能耗总量 (吨)" width="180" sortable></el-table-column>
+            <el-table-column prop="carbon" label="碳排总量 (吨)" width="180" sortable></el-table-column>
+            <el-table-column prop="product" label="产品单耗 (吨/件)" width="180" sortable></el-table-column>
           </el-table>
         </el-card>
       </el-col>
@@ -40,8 +40,9 @@
 </template>
 
 
+
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import * as echarts from 'echarts';
 import { ElMessage } from 'element-plus';
 
@@ -53,16 +54,16 @@ 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 }
+  { 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 = () => {
@@ -375,6 +376,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
+
 <style scoped>
 .el-main {
   padding: 20px;

src/views/c/ab/index.vue

@@ -6,6 +6,7 @@
       <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="company" label="企业信息" />
           <el-table-column prop="name" label="指标名称" />
           <el-table-column prop="value" label="评分" />
           <el-table-column label="描述">
@@ -22,7 +23,7 @@
           </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>
+        <div ref="completenessChart" style="width: 600px; height: 400px; 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>
@@ -43,7 +44,7 @@
           </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>
+        <div ref="timelinessChart" style="width: 600px; height: 400px; 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>
@@ -64,7 +65,7 @@
           </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>
+        <div ref="accuracyChart" style="width: 600px; height: 400px; margin-top: 20px;" v-show="activeName === 'accuracy'"></div>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -78,16 +79,16 @@ import { ElMessage, ElLoading, ElTag } from 'element-plus'
 const activeName = ref('completeness')
 
 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' }
+  { company: '奇趣科技有限公司', name: '能源消耗总量', value: 85, description: '总能源消耗量', status: '正常', actionDate: '2023-10-01' },
+  { company: '神秘生物研究所', name: '可再生能源使用比例', value: 90, description: '可再生能源占比', status: '良好', actionDate: '2023-10-02' },
+  { company: '幽灵电子厂', name: '碳排放总量', value: 80, description: '总碳排放量', status: '正常', actionDate: '2023-10-03' },
+  { company: '隐形材料公司', name: '单位产值能耗', value: 88, description: '每单位产值的能耗', status: '良好', actionDate: '2023-10-04' },
+  { company: '幻影能源集团', name: '单位产值碳排放', value: 82, description: '每单位产值的碳排放', status: '正常', actionDate: '2023-10-05' },
+  { company: '超时空科技', name: '节能改造项目数', value: 87, description: '节能改造项目的数量', status: '良好', actionDate: '2023-10-06' },
+  { company: '未来创新实验室', name: '绿色建筑比例', value: 92, description: '绿色建筑的比例', status: '优秀', actionDate: '2023-10-07' },
+  { company: '暗物质研究室', name: '清洁能源投资', value: 89, description: '清洁能源的投资金额', status: '良好', actionDate: '2023-10-08' },
+  { company: '量子计算中心', name: '碳足迹管理', value: 84, description: '碳足迹管理的情况', status: '正常', actionDate: '2023-10-09' },
+  { company: '虚拟现实工作室', name: '环境管理体系认证', value: 86, description: '环境管理体系的认证情况', status: '良好', actionDate: '2023-10-10' }
 ]
 
 const timelinessData = [
@@ -144,7 +145,11 @@ const initChart = (chartRef, title, data, chartType) => {
         },
         tooltip: {},
         xAxis: {
-          data: data.map(item => item.name)
+          data: data.map(item => item.name),
+          axisLabel: {
+            rotate: 45,
+            interval: 0
+          }
         },
         yAxis: {},
         series: [{
@@ -191,7 +196,11 @@ const initChart = (chartRef, title, data, chartType) => {
         },
         xAxis: {
           type: 'category',
-          data: data.map(item => item.name)
+          data: data.map(item => item.name),
+          axisLabel: {
+            rotate: 45,
+            interval: 0
+          }
         },
         yAxis: {
           type: 'value'

src/views/d/aa/index.vue

@@ -9,7 +9,7 @@
           <h3>产品模型库</h3>
           <el-form style="display: flex;">
             <el-form-item label="产品">
-              <el-input v-model="searchQuery" placeholder="搜索产品" style="margin-bottom: 20px;" />
+              <el-input v-model="searchQuery" placeholder="搜索产品" style="margin-bottom: 20px;"/>
             </el-form-item>
             <el-form-item label="行业">
               <el-select v-model="selectedIndustry" placeholder="请选择行业" style="width: 300px;margin-bottom: 20px;">
@@ -22,10 +22,42 @@
               </el-select>
             </el-form-item>
           </el-form>
+          <el-button type="primary" @click="addProductModal">添加产品模型</el-button>
+          <el-dialog v-model="addProductModalVisible">
+            <template #header>
+              添加产品模型
+            </template>
+            <template #default>
+              <el-form ref="addForm">
+                <el-form-item label="行业" required>
+                  <el-select v-model="addProdForm.industry" placeholder="请选择行业">
+                    <el-option
+                        v-for="industry in industries"
+                        :key="industry.value"
+                        :label="industry.label"
+                        :value="industry.value"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="产品名称" required>
+                  <el-input v-model="addProdForm.name" placeholder="请输入产品名称"/>
+                </el-form-item>
+                <el-form-item label="描述">
+                  <el-input v-model="addProdForm.description" placeholder="请输入描述"/>
+                </el-form-item>
+                <el-form-item label="碳足迹">
+                  <el-input-number min="0" step="0.1" v-model="addProdForm.carbonFootprint" placeholder="请输入碳足迹"/>
+                </el-form-item>
+              </el-form>
+            </template>
+            <template #footer>
+              <el-button type="primary" @click="addProduct">确定</el-button>
+            </template>
+          </el-dialog>
           <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-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>
@@ -51,52 +83,116 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch, computed } from 'vue'
+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'
+import {
+  ElHeader,
+  ElMain,
+  ElSelect,
+  ElOption,
+  ElTable,
+  ElTableColumn,
+  ElTabs,
+  ElTabPane,
+  ElInput,
+  ElDialog,
+  ElMessage
+} from 'element-plus'
 
 const activeTab = ref('productLibrary')
 const selectedIndustry = ref('')
 const searchQuery = ref('')
 const productDialogVisible = ref(false)
 const selectedProduct = ref({})
-
+const addProductModalVisible = ref(false);
+const addForm = reactive({});
+const addProdForm = ref({
+  industry: '',
+  name: '',
+  description: '',
+  carbonFootprint: 0
+})
+const addProduct = () => {
+  if (addProdForm.value.industry && addProdForm.value.name) {
+    const industry = addProdForm.value.industry;
+    industryData[industry].push({
+      name: addProdForm.value.name,
+      description: addProdForm.value.description,
+      carbonFootprint: addProdForm.value.carbonFootprint
+    });
+    ElMessage.success('产品添加成功');
+    addProductModalVisible.value = false;
+    addProdForm.value = {
+      industry: '',
+      name: '',
+      description: '',
+      carbonFootprint: 0
+    };
+  } else {
+    ElMessage.error('请填写完整信息');
+  }
+}
+const addProductModal = () => {
+  addProductModalVisible.value = true;
+}
 const industries = [
-  { label: '钢铁', value: 'steel' },
-  { label: '水泥', value: 'cement' },
-  { label: '动力电池', value: 'battery' }
+  {label: '钢铁', value: 'steel'},
+  {label: '有色金属', value: 'nonferrous'},
+  {label: '石化', value: 'petrochemical'},
+  {label: '化工', value: 'chemical'},
+  {label: '建材', value: 'construction'}
 ]
 
 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 }
+    {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 }
+  nonferrous: [
+    {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 }
+  petrochemical: [
+    {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}
+  ],
+  chemical: [
+    {name: '氯碱化工模型', description: '氯碱化工生产过程', carbonFootprint: 0.3},
+    {name: '烧碱模型', description: '烧碱生产过程', carbonFootprint: 1.2},
+    {name: '聚氯乙烯(PVC)模型', description: '聚氯乙烯(PVC)生产过程', 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}
+  ],
+  construction: [
+    {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}
   ]
 }
 
@@ -114,81 +210,78 @@ const filteredProducts = computed(() => {
 const processChart = ref(null)
 
 const initProcessChart = () => {
-  const chart = echarts.init(processChart.value)
+  const chart = echarts.init(processChart.value);
+  const selectedIndustryData = industryData[selectedIndustry.value] || [];
+  const treeData = {
+    name: industries.find(item => item.value === selectedIndustry.value).label,
+    children: selectedIndustryData.map(product => ({
+      name: product.name,
+      value: product.carbonFootprint,
+      itemStyle: {
+        color: getColorForCarbonFootprint(product.carbonFootprint),
+        borderColor: getColorForCarbonFootprint(product.carbonFootprint)
+      }
+    }))
+  };
+
   const option = {
+    backgroundColor: '#fff',
     title: {
-      text: '工序积木图',
+      subtext: '碳排放路径图',
       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'
+        type: 'tree',
+        id: 0,
+        name: 'tree',
+        data: [treeData],
+        top: '18%',
+        bottom: '14%',
+        // 修改布局为横向
+        layout: 'orthogonal',
+        symbol: 'emptyCircle',
+        symbolSize: 7,
+        initialTreeDepth: 3,
+        animationDurationUpdate: 750,
+        label: {
+          position: 'left',
+          verticalAlign: 'middle',
+          align: 'right',
+          fontSize: 10
+        },
+        leaves: {
+          label: {
+            position: 'right',
+            verticalAlign: 'middle',
+            align: 'left'
           }
-        })),
-        lineStyle: {
-          curveness: 0.5
         },
-        emphasis: {
-          focus: 'adjacency'
+        expandAndCollapse: true,
+        roam: true,
+        itemStyle: {
+          color: '#1f77b4',
+          borderColor: '#1f77b4'
         }
       }
-    ]
-  }
-  chart.setOption(option)
-
-  // 直接设置高亮
-  if (selectedIndustry.value) {
-    chart.dispatchAction({
-      type: 'highlight',
-      seriesIndex: 0,
-      dataIndex: 0
-    })
-  }
+    ],
+    tooltip: {
+      trigger: 'item'
+    }
+  };
+  chart.setOption(option);
 
   // 添加点击事件
   chart.on('click', (params) => {
     if (params.dataType === 'node') {
-      const product = filteredProducts.value.find(p => p.name === params.name)
+      const product = selectedIndustryData.find(p => p.name === params.name);
       if (product) {
-        selectedProduct.value = product
-        productDialogVisible.value = true
+        selectedProduct.value = product;
+        productDialogVisible.value = true;
       }
     }
-  })
-}
+  });
+};
 
 const getColorForCarbonFootprint = (carbonFootprint) => {
   if (carbonFootprint < 0.5) return '#67C23A' // 绿色

src/views/e/aa/index.vue

@@ -6,21 +6,23 @@
     <el-main>
       <el-form style="display: flex">
         <el-form-item label="关键词">
-          <el-input
+          <el-select
               v-model="searchQuery"
+              multiple
+              filterable
+              allow-create
+              default-first-option
+              :reserve-keyword="false"
               placeholder="请输入文章关键词"
-              style="margin-bottom: 20px;width: 300px"
-              @input="performSearch"
+              style="margin-bottom: 20px; width: 300px"
+              @change="performSearch"
           >
-            <template #append>
-              <el-button icon="el-icon-search" @click="performSearch"></el-button>
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item label="关键词">
-          <el-select v-model="selectedKeyword" placeholder="选择关键词" style="margin-bottom: 20px; width: 300px" @change="performSearch">
-            <el-option label="全部" value="" />
-            <el-option v-for="keyword in uniqueKeywords" :key="keyword" :label="keyword" :value="keyword" />
+            <el-option
+                v-for="keyword in uniqueKeywords"
+                :key="keyword"
+                :label="keyword"
+                :value="keyword"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="排序方式">
@@ -32,6 +34,10 @@
           </el-select>
         </el-form-item>
       </el-form>
+      <div>
+        <el-button type="primary" @click="exportData">导出数据</el-button>
+        <el-button type="success" @click="showImportDialog = true">导入新闻</el-button>
+      </div>
       <el-table :data="paginatedResults" style="width: 100%">
         <el-table-column prop="title" label="文件标题" />
         <el-table-column prop="summary" label="内容摘要" />
@@ -57,21 +63,52 @@
           style="margin-top: 20px;"
       />
     </el-main>
+
+    <!-- 导入新闻对话框 -->
+    <el-dialog title="导入新闻" v-model="showImportDialog" width="30%">
+      <el-form :model="newsForm" :rules="rules" ref="newsFormRef" label-width="100px">
+        <el-form-item label="标题" prop="title">
+          <el-input v-model="newsForm.title" placeholder="请输入标题"></el-input>
+        </el-form-item>
+        <el-form-item label="内容摘要" prop="summary">
+          <el-input v-model="newsForm.summary" placeholder="请输入内容摘要"></el-input>
+        </el-form-item>
+        <el-form-item label="详细内容" prop="content">
+          <el-input v-model="newsForm.content" type="textarea" placeholder="请输入详细内容"></el-input>
+        </el-form-item>
+        <el-form-item label="政策来源" prop="source">
+          <el-input v-model="newsForm.source" placeholder="请输入政策来源"></el-input>
+        </el-form-item>
+        <el-form-item label="发布日期" prop="date">
+          <el-date-picker v-model="newsForm.date" type="date" placeholder="请选择发布日期" value-format="YYYY-MM-DD"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="关键词" prop="keywords">
+          <el-input v-model="newsForm.keywords" placeholder="请输入关键词，多个关键词用逗号分隔"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="showImportDialog = false">取 消</el-button>
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </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 { ElHeader, ElMain, ElInput, ElButton, ElSelect, ElOption, ElTable, ElTableColumn, ElPagination, ElTag, ElLoading, ElMessage, ElDialog, ElFormItem, ElForm, ElDatePicker } from 'element-plus'
 import { knowledgeBase } from './data.js'
 
-const searchQuery = ref('')
-const selectedKeyword = ref('')
+const searchQuery = ref([])
 const sortField = ref('title')
 const results = ref(knowledgeBase)
 const pageSize = ref(5)
 const currentPage = ref(1)
 const total = ref(knowledgeBase.length)
+const showImportDialog = ref(false)
+const newsFormRef = ref(null)
 
 const uniqueKeywords = computed(() => {
   const allKeywords = knowledgeBase.flatMap(item => item.keywords)
@@ -79,18 +116,18 @@ const uniqueKeywords = computed(() => {
 })
 
 const performSearch = () => {
-  const queryWords = searchQuery.value.split(/\s+/).filter(word => word.trim() !== '')
+  const queryWords = searchQuery.value.map(word => word.toLowerCase())
   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()))
+          item.title.toLowerCase().includes(word) ||
+          item.summary.toLowerCase().includes(word) ||
+          item.content.toLowerCase().includes(word) ||
+          item.source.toLowerCase().includes(word) ||
+          item.date.toLowerCase().includes(word) ||
+          item.keywords.some(keyword => keyword.toLowerCase().includes(word))
       )
-    }) && (!selectedKeyword.value || item.keywords.includes(selectedKeyword.value))
+    })
   })
   total.value = results.value.length
   currentPage.value = 1
@@ -119,6 +156,59 @@ const handleCurrentChange = (newPage) => {
   currentPage.value = newPage
 }
 
+const exportData = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在导出数据...',
+    background: 'rgba(0, 0, 0, 0.7)',
+  })
+
+  setTimeout(() => {
+    loading.close()
+    ElMessage.success('导出成功')
+  }, 2000)
+}
+
+const newsForm = ref({
+  title: '',
+  summary: '',
+  content: '',
+  source: '',
+  date: '',
+  keywords: ''
+})
+
+const rules = ref({
+  title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
+  summary: [{ required: true, message: '内容摘要不能为空', trigger: 'blur' }],
+  content: [{ required: true, message: '详细内容不能为空', trigger: 'blur' }],
+  source: [{ required: true, message: '政策来源不能为空', trigger: 'blur' }],
+  date: [{ required: true, message: '发布日期不能为空', trigger: 'change' }],
+  keywords: [{ required: true, message: '关键词不能为空', trigger: 'blur' }]
+})
+
+const submitForm = () => {
+  newsFormRef.value.validate((valid) => {
+    if (valid) {
+      const newNews = {
+        title: newsForm.value.title,
+        summary: newsForm.value.summary,
+        content: newsForm.value.content,
+        source: newsForm.value.source,
+        date: newsForm.value.date, // 已经是 YYYY-MM-DD 格式
+        keywords: newsForm.value.keywords.split(',').map(keyword => keyword.trim())
+      }
+      knowledgeBase.push(newNews)
+      performSearch()
+      showImportDialog.value = false
+      ElMessage.success('新闻导入成功')
+    } else {
+      ElMessage.error('请填写所有必填项')
+      return false
+    }
+  })
+}
+
 onMounted(() => {
   performSearch()
 })