双碳平台静态页面提交

src/assets/svg/u540.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="15px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -73 -462 )">
+    <path d="M 0.840207519531248 11.2351689453125  L 7.5 14.9703544921875  L 14.1598095703125 11.2351689453125  L 14.1598095703125 3.76506347656249  L 7.49998291015625 0.0296787109375032  L 0.840190429687496 3.76484765625  L 0.840190429687496 11.235185546875  Z M 12.9183178710937 4.46108398437499  L 12.9183178710937 10.5387001953125  L 7.5 13.5773837890625  L 2.08216064453125 10.53868359375  L 2.08216064453125 4.4610673828125  L 7.5 1.42236718750002  L 12.9183178710937 4.4610673828125  Z M 3.32219970703125 4.51789453124999  L 3.32219970703125 10.1171201171875  L 2.36923583984375 10.1171201171875  L 2.36923583984375 7.09999999999999  L 2.36923583984375 4.51789453124999  L 3.32219970703125 4.51789453124999  Z " fill-rule="nonzero" fill="#475570" stroke="none" transform="matrix(1 0 0 1 73 462 )" />
+  </g>
+</svg>

src/views/b/aa/NewPage.vue

@@ -0,0 +1,183 @@
+<template>
+  <el-form>
+    <el-row :gutter="5">
+      <el-col :span="5">
+        <el-card>
+          <el-form-item required prop="c" style="display: flex;flex-direction: column">
+            <div>工业增加值（万元）<span style="color: red">*</span></div>
+            <el-input v-model="form.a"></el-input>
+          </el-form-item>
+        </el-card>
+      </el-col>
+      <el-col :span="5">
+        <el-card>
+          <el-form-item required prop="c" style="display: flex;flex-direction: column">
+            <div>产值（万元）<span style="color: red">*</span></div>
+            <el-input v-model="form.b"></el-input>
+          </el-form-item>
+        </el-card>
+      </el-col>
+      <el-col :span="5">
+        <el-card>
+          <el-form-item required prop="c" style="display: flex;flex-direction: column">
+            <div>能源总费用（吨标煤）</div>
+            <el-input v-model="form.c"></el-input>
+          </el-form-item>
+        </el-card>
+      </el-col>
+      <el-col :span="5">
+        <el-card>
+          <el-form-item required prop="c" style="display: flex;flex-direction: column">
+            <div>生产总成本（万元）<span style="color: red">*</span></div>
+            <el-input v-model="form.d"></el-input>
+          </el-form-item>
+        </el-card>
+      </el-col>
+      <el-col :span="4" offset="1">
+        <!--        <el-card>-->
+        <div style="display: flex;align-items: center;height: 100%;">
+          <el-button type="primary" @click="calc">计算</el-button>
+          <el-button @click="report">生成报告</el-button>
+        </div>
+        <!--        </el-card>-->
+      </el-col>
+
+    </el-row>
+  </el-form>
+  <el-row :gutter="5" style="margin-top: 20px;">
+    <el-col :span="24" style="display: flex;gap: 10px;height: 60vh;">
+      <el-card style="flex: 1;">
+        <template #header>
+          <div>
+            <span>煤</span>
+            <img src="/src/assets/svg/u540.svg"/>
+          </div>
+        </template>
+        <template #default>
+          <el-form>
+            <el-form-item label="无烟煤(吨)">
+              <el-input v-model="form2.a"/>
+            </el-form-item>
+            <el-form-item label="烟煤(吨)">
+              <el-input v-model="form2.b"/>
+            </el-form-item>
+            <el-form-item label="原煤(吨)">
+              <el-input v-model="form2.c"/>
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-card>
+      <el-card style="flex: 1;">
+        <template #header>
+          <div>
+            <span>油</span>
+            <img src="/src/assets/svg/u561.svg"/>
+          </div>
+        </template>
+        <template #default>
+          <el-empty></el-empty>
+        </template>
+      </el-card>
+      <el-card style="flex: 1;">
+        <template #header>
+          <div>
+            <span>气</span>
+            <img src="/src/assets/svg/u598.svg"/>
+          </div>
+        </template>
+        <template #default>
+          <el-empty/>
+        </template>
+      </el-card>
+      <el-card style="flex: 1;">
+        <template #header>
+          <div>
+            <span>电</span>
+            <img src="/src/assets/svg/u540.svg"/>
+          </div>
+        </template>
+        <template #default>
+          <el-form>
+            <el-form-item label="无烟煤(吨)">
+              <el-input v-model="form3.a"/>
+            </el-form-item>
+            <el-form-item label="烟煤(吨)">
+              <el-input v-model="form3.b"/>
+            </el-form-item>
+            <el-form-item label="原煤(吨)">
+              <el-input v-model="form3.c"/>
+            </el-form-item>
+            <div class="custom-hr">
+              <span>清洁能源</span>
+            </div>
+            <el-form-item label="光伏">
+              <el-input v-model="form3.d"/>
+            </el-form-item>
+            <el-form-item label="风电">
+              <el-input v-model="form3.e"/>
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-card>
+      <el-card style="flex: 1;">
+        <template #header>
+          <div>
+            <span>热</span>
+            <img src="/src/assets/svg/u540.svg"/>
+          </div>
+        </template>
+        <template #default>
+          <el-empty></el-empty>
+        </template>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script setup>
+import {ElMessage} from "element-plus";
+
+const form = reactive({
+  a: ''
+})
+const form2 = reactive({
+  a: ''
+})
+const form3 = reactive({
+  a: ''
+})
+const calc = () => {
+  ElMessage.success("已提交计算")
+}
+const report = () => {
+  ElMessage.info("正在提交生成报告")
+}
+</script>
+
+<style scoped>
+.custom-hr {
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin: 20px 0;
+}
+
+.custom-hr::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: #ccc;
+  z-index: 1;
+}
+
+.custom-hr span {
+  position: relative;
+  background-color: white;
+  padding: 0 10px;
+  z-index: 2;
+  font-size: 14px;
+}
+</style>

src/views/b/aa/index.vue

@@ -1,81 +1,89 @@
 <template>
   <el-container style="height: 90vh; border: 1px solid #eee; padding: 20px;">
-    <el-container>
-      <el-aside style="width: 600px; margin-right: 20px;">
-        <div class="config-container">
-          <el-form ref="formRef" :model="form" :rules="rules" label-width="150px" @submit.native.prevent="saveConfig">
-            <el-form-item label="基础类参数" prop="baseParams">
-              <el-input v-model="form.baseParams" placeholder="请输入基础类参数"></el-input>
-            </el-form-item>
-            <el-form-item label="情景依托类参数" prop="scenarioParams">
-              <el-input v-model="form.scenarioParams" placeholder="请输入情景依托类参数"></el-input>
-            </el-form-item>
-            <el-form-item label="规划边界类参数" prop="boundaryParams">
-              <el-input v-model="form.boundaryParams" placeholder="请输入规划边界类参数"></el-input>
-            </el-form-item>
-            <el-form-item label="其他参数" prop="otherParams">
-              <el-input v-model="form.otherParams" placeholder="请输入其他参数"></el-input>
-            </el-form-item>
-            <el-form-item label="备注" prop="remarks">
-              <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注"></el-input>
-            </el-form-item>
-            <el-form-item label="日期" prop="date">
-              <el-date-picker
-                  v-model="form.date"
-                  type="date"
-                  placeholder="请选择日期"
-                  format="YYYY-MM-DD"
-                  value-format="YYYY-MM-DD"
-              ></el-date-picker>
-            </el-form-item>
-            <el-button type="primary" @click="saveConfig">保存配置</el-button>
-          </el-form>
-        </div>
-      </el-aside>
-      <el-main style="display: block;background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
-        <h2>碳排放形势预测分析</h2>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-card shadow="hover">
-              <div slot="header">
-                <span>历史碳排放数据</span>
-              </div>
-              <div>
-                <el-table :data="historicalData" style="width: 100%">
-                  <el-table-column prop="year" label="年份" width="100"></el-table-column>
-                  <el-table-column prop="emission" label="碳排放量 (吨)" width="180"></el-table-column>
-                </el-table>
-              </div>
-            </el-card>
-          </el-col>
-          <el-col :span="12">
-            <el-card shadow="hover">
-              <div slot="header">
-                <span>未来碳排放预测</span>
-              </div>
-              <div>
-                <el-table :data="futureData" style="width: 100%">
-                  <el-table-column prop="year" label="年份" width="100"></el-table-column>
-                  <el-table-column prop="predictedEmission" label="预测碳排放量 (吨)" width="180"></el-table-column>
-                </el-table>
-              </div>
-            </el-card>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20" style="margin-top: 20px;">
-          <el-col :span="24">
-            <el-card shadow="hover">
-              <div slot="header">
-                <span>碳排放趋势图</span>
-              </div>
-              <div>
-                <div id="chart" style="width: 100%; "></div>
-              </div>
-            </el-card>
-          </el-col>
-        </el-row>
-      </el-main>
-    </el-container>
+    <el-tabs v-model="activeTab" type="border-card" style="width:100%;">
+      <el-tab-pane label="配置管理" name="config">
+        <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="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>
+            <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%; height: 400px;"></div>
+                  </div>
+                </el-card>
+              </el-col>
+            </el-row>
+          </el-main>
+        </el-container>
+      </el-tab-pane>
+      <el-tab-pane label="化工" name="newTab">
+        <!-- 新标签页的内容 -->
+        <NewPage />
+      </el-tab-pane>
+    </el-tabs>
   </el-container>
 </template>
 
@@ -83,6 +91,9 @@
 import { ref, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
 import * as echarts from 'echarts';
+import NewPage from "@/views/b/aa/NewPage.vue";
+
+const activeTab = ref('config');
 
 const form = ref({
   baseParams: '',
@@ -190,13 +201,6 @@ onMounted(() => {
   background-color: #f5f7fa;
 }
 
-.el-header {
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
 .el-aside {
   background-color: #fff;
   padding: 20px;

src/views/d/aa/index.vue

@@ -7,15 +7,21 @@
       <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-form style="display: flex;">
+            <el-form-item label="产品">
+              <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;">
+                <el-option
+                    v-for="industry in industries"
+                    :key="industry.value"
+                    :label="industry.label"
+                    :value="industry.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
           <el-table :data="filteredProducts" style="width: 100%" @row-click="showProductDetails">
             <el-table-column prop="name" label="产品名称" />
             <el-table-column prop="description" label="描述" />

src/views/e/aa/index.vue

@@ -4,26 +4,34 @@
       <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-form style="display: flex">
+        <el-form-item label="关键词">
+          <el-input
+              v-model="searchQuery"
+              placeholder="请输入文章关键词"
+              style="margin-bottom: 20px;width: 300px"
+              @input="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-select>
+        </el-form-item>
+        <el-form-item label="排序方式">
+          <el-select v-model="sortField" placeholder="排序方式" style="margin-bottom: 20px;width: 300px">
+            <el-option label="按标题排序" value="title" />
+            <el-option label="按内容摘要排序" value="summary" />
+            <el-option label="按政策来源排序" value="source" />
+            <el-option label="按日期排序" value="date" />
+          </el-select>
+        </el-form-item>
+      </el-form>
       <el-table :data="paginatedResults" style="width: 100%">
         <el-table-column prop="title" label="文件标题" />
         <el-table-column prop="summary" label="内容摘要" />