双碳平台静态页面提交

src/views/b/aa/NewPage2.vue

@@ -0,0 +1,357 @@
+<script setup>
+
+import {Search} from "@element-plus/icons-vue";
+</script>
+
+<template>
+  <el-row :gutter="5">
+    <el-col :span="24" style="height: 50px;line-height: 50px">
+      <div style="display: flex;justify-content: space-between">
+        <div>环境及用料配置</div>
+        <div style="display: flex;gap: 20px;">
+          <el-button type="primary">保存</el-button>
+          <el-button type="info">重置</el-button>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="24" style="display: grid;grid-template-columns: 22% 20% 20% 20% 15%; gap: 10px">
+      <el-card style="height: 600px">
+        <template #header>
+          <div style="display: flex;justify-content: space-between;">
+            <div>不同种类化石燃料燃烧CO2排放</div>
+            <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
+          </div>
+        </template>
+        <template #default>
+          <el-input placeholder="请输入燃料品种名称">
+            <template #prepend>
+              <el-button :icon="Search" />
+            </template>
+          </el-input>
+          <div style="margin-top: 30px;display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">
+            <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>
+              <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>
+              <template #default>
+                无烟煤
+              </template>
+            </el-checkbox>
+            <el-checkbox>
+              <template #default>
+                无烟煤
+              </template>
+            </el-checkbox>
+          </div>
+          <div style="color: #1111bb;text-align: center;margin-top: 300px">
+            查看更多化石燃料...
+          </div>
+        </template>
+      </el-card>
+      <div>
+        <el-card style="height: 300px">
+          <template #header>
+            <div style="display: flex;justify-content: space-between;">
+              <div>净购入的电力消费产生的排放</div>
+              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
+            </div>
+          </template>
+          <template #default>
+            <div style="display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">
+              <el-checkbox>
+                <template #default>
+                  电力
+                </template>
+              </el-checkbox>
+            </div>
+          </template>
+        </el-card>
+        <el-card style="height: 280px;margin-top: 20px;">
+          <template #header>
+            <div style="display: flex;justify-content: space-between;">
+              <div>净购入的热力消费产生的排放</div>
+              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
+            </div>
+          </template>
+          <template #default>
+            <div style="display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">
+              <el-checkbox>
+                <template #default>
+                  热力
+                </template>
+              </el-checkbox>
+            </div>
+          </template>
+        </el-card>
+      </div>
+      <div>
+        <el-card style="height: 300px">
+          <template #header>
+            <div style="display: flex;justify-content: space-between;">
+              <div>过程排放 - 碳酸盐分解CO2排放</div>
+              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
+            </div>
+          </template>
+          <template #default>
+            <div style="display: grid;grid-template-columns: 50% 49% ;row-gap: 1%;column-gap: 10%">
+              <el-checkbox>
+                <template #default>
+                  含CaCO3
+                </template>
+              </el-checkbox>
+              <el-checkbox>
+                <template #default>
+                  含MgCO3
+                </template>
+              </el-checkbox>
+              <el-checkbox>
+                <template #default>
+                  含Na2CO3
+                </template>
+              </el-checkbox>
+              <el-checkbox>
+                <template #default>
+                  含BaCO3
+                </template>
+              </el-checkbox>
+              <el-checkbox>
+                <template #default>
+                  含Li2CO3
+                </template>
+              </el-checkbox>
+              <el-checkbox>
+                <template #default>
+                  含K2CO3
+                </template>
+              </el-checkbox>
+            </div>
+            <div style="color: #1111bb;text-align: center;margin-top: 100px">
+              查看更多碳酸盐...
+            </div>
+          </template>
+        </el-card>
+        <el-card style="height: 280px;margin-top: 20px;">
+          <template #header>
+            <div style="display: flex;justify-content: space-between;">
+              <div>过程排放 - 碳酸盐分解CO2排放</div>
+              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
+            </div>
+          </template>
+          <template #default>
+            <div style="display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">
+              <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>
+                <template #default>
+                  氧化法
+                </template>
+              </el-checkbox>
+            </div>
+          </template>
+        </el-card>
+      </div>
+      <div>
+        <el-card style="height: 300px">
+          <template #header>
+            <div style="display: flex;justify-content: space-between;">
+              <div>过程排放 - 原材料消耗产生排放</div>
+              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
+            </div>
+          </template>
+          <template #default>
+            <div style="display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">
+              <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>
+                <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>
+            </div>
+          </template>
+        </el-card>
+        <el-card style="height: 280px;margin-top: 20px;">
+          <template #header>
+            <div style="display: flex;justify-content: space-between;">
+              <div>过程排放 - 己二酸生产过程的N2O排放</div>
+              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
+            </div>
+          </template>
+          <template #default>
+            <div style="display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">
+              <el-checkbox>
+                <template #default>
+                  硝酸氧化
+                </template>
+              </el-checkbox>
+              <el-checkbox>
+                <template #default>
+                  其他
+                </template>
+              </el-checkbox>
+            </div>
+          </template>
+        </el-card>
+      </div>
+      <el-card style="height: 600px">
+        <template #header>
+          <div style="display: flex;justify-content: space-between;">
+            <div>回收利用 - 不考虑自用</div>
+            <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
+          </div>
+        </template>
+        <template #default>
+          <el-input placeholder="请输入回收利用的气体">
+            <template #prepend>
+              <el-button :icon="Search" />
+            </template>
+          </el-input>
+          <div style="margin-top: 30px;display: grid;grid-template-columns: 50% 49%;row-gap: 1%;column-gap: 10%">
+            <el-checkbox>
+              <template #default>
+                CO2
+              </template>
+            </el-checkbox>
+            <el-checkbox>
+              <template #default>
+                HFCs
+              </template>
+            </el-checkbox>
+            <el-checkbox>
+              <template #default>
+                CH4
+              </template>
+            </el-checkbox>
+            <el-checkbox>
+              <template #default>
+                PFCs
+              </template>
+            </el-checkbox>
+            <el-checkbox>
+              <template #default>
+                N2O
+              </template>
+            </el-checkbox>
+            <el-checkbox>
+              <template #default>
+                SF6
+              </template>
+            </el-checkbox>
+          </div>
+        </template>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/b/aa/index.vue

@@ -1,7 +1,7 @@
 <template>
   <el-container style="height: 90vh; border: 1px solid #eee; padding: 20px;">
     <el-tabs v-model="activeTab" type="border-card" style="width:100%;">
-      <el-tab-pane label="配置管理" name="config">
+      <el-tab-pane label="基础配置" name="config">
         <el-container>
           <el-aside style="width: 600px; margin-right: 20px;">
             <div class="config-container">
@@ -79,10 +79,14 @@
           </el-main>
         </el-container>
       </el-tab-pane>
-      <el-tab-pane label="化工" name="newTab">
+      <el-tab-pane label="情景依托" name="newTab">
         <!-- 新标签页的内容 -->
         <NewPage />
       </el-tab-pane>
+      <el-tab-pane label="规划边界" name="newTab2">
+        <!-- 新标签页的内容 -->
+        <NewPage2 />
+      </el-tab-pane>
     </el-tabs>
   </el-container>
 </template>
@@ -92,6 +96,7 @@ import { ref, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
 import * as echarts from 'echarts';
 import NewPage from "@/views/b/aa/NewPage.vue";
+import NewPage2 from "@/views/b/aa/NewPage2.vue";
 
 const activeTab = ref('config');