双碳概览页面部分页面开发。

src/components/doubleCarbon/PV/doubleCarbonPv.vue

@@ -1,11 +1,14 @@
+<!--
+    光伏发电页面
+    @author 刘梦祥
+    @date 2023年2月8日
+-->
 <template>
-
+  <div>光伏发电页面</div>
 </template>
 
 <script>
-export default {}
+export default {};
 </script>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

src/components/doubleCarbon/car/doubleCarbonCar.vue

@@ -1,11 +1,14 @@
+<!--
+    车辆排放页面
+    @author 刘梦祥
+    @date 2023年2月8日
+-->
 <template>
-
+  <div>车辆排放</div>
 </template>
 
 <script>
-export default {}
+export default {};
 </script>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

src/components/doubleCarbon/overview/doubleCarbonOverview.vue

@@ -1,11 +1,197 @@
+<!--
+    双碳概览页面
+    @author 刘梦祥
+    @date 2023年2月8日
+-->
 <template>
-
+  <div class="doubleCarbon-main-box flexColumn">
+    <!-- 头部搜索区域 -->
+    <div>
+      <div class="flex flex_between">
+        <div class="flex">
+          <div class="mr1rem">单位名称：<a-select style="width:200px;" :options="options.nameOfUnit"></a-select></div>
+          <div>时间范围：<a-range-picker style="width:200px;"></a-range-picker></div>
+        </div>
+        <div>
+          <a-button class="mr1rem">重置</a-button>
+          <a-button type="primary">查询</a-button>
+        </div>
+      </div>
+      <div class="cardTitle">核心指标</div>
+      <div class="flex flex_around coreListBox">
+        <div v-for="(item, index) in coreList" :key="'coreList' + index">
+          <div>{{ item.title }}</div>
+          <div class="core_value">
+            {{ item.value ? item.value : "--" }}<span class="core_unit">{{ item.unit ? item.unit : "" }}</span
+            ><span class="core_leavel" v-if="item.leavel" :style="{ color: colorLeavel[item.leavel] }">!</span>
+          </div>
+          <div v-if="item.info" class="core_info">
+            {{ item.info.title
+            }}<span class="core_info_value" :style="{ color: colorLeavel[item.info.status] }">{{ item.info.value }}</span>
+          </div>
+          <a-divider v-if="index < coreList.length - 1" type="vertical" />
+        </div>
+      </div>
+    </div>
+    <!-- 碳排放分析和碳配额构成 -->
+    <div>碳排放分析和碳配额构成</div>
+    <div>双碳新闻和碳排放占比</div>
+  </div>
 </template>
 
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      // 单位名称option可选值
+      options: {
+        nameOfUnit: [{ value: "1", label: "type1" }, { value: "2", label: "type2" }]
+      },
+      // 头部搜索条件中绑定值
+      searchParam: {
+        nameOfUnit: "",
+        timeRange: ""
+      },
+      // 核心指标中的碳配额存量中的不同等级对应的icon颜色
+      colorLeavel: {
+        1: "#67C23A",
+        2: "#E6A23C",
+        3: "#F56C6C"
+      },
+      // 头部核心指标循环显示数据
+      coreList: [
+        {
+          title: "碳配额存量",
+          value: "60%",
+          leavel: 1
+        },
+        {
+          title: "碳排放存量",
+          value: 500,
+          unit: "tCO2e",
+          info: {
+            title: "同比上升",
+            status: 1,
+            value: "0.4%"
+          }
+        },
+        {
+          title: "单位面积碳排放",
+          value: 380,
+          unit: "tCO2e/m²",
+          info: {
+            title: "同比上升",
+            status: 1,
+            value: "0.4%"
+          }
+        },
+        {
+          title: "人均碳排放",
+          value: 80,
+          unit: "tCO2e/人",
+          info: {
+            title: "同比上升",
+            status: 1,
+            value: "0.4%"
+          }
+        },
+        {
+          title: "光伏减排",
+          value: 40,
+          unit: "tCO2e",
+          info: {
+            title: "同比上升",
+            status: 1,
+            value: "0.4%"
+          }
+        },
+        {
+          title: "值得关注",
+          value: "减少2辆车出行一周"
+        }
+      ]
+    };
+  },
+  mounted() {},
+  methods: {}
+};
 </script>
 
 <style lang="less" scoped>
-
-</style>
+// 复用样式
+.flexColumn {
+  display: flex;
+  overflow-y: auto;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  &_center {
+    justify-content: center;
+  }
+  &_between {
+    justify-content: space-between;
+  }
+  &_around {
+    justify-content: space-around;
+  }
+}
+// 页面主题样式
+.doubleCarbon-main-box {
+  width: calc(100% - 16px);
+  height: calc(100% - 16px);
+  & > div {
+    padding: 5px 10px;
+    border-radius: 2px;
+    border: 1px solid #e7eaf1;
+    margin-bottom: 10px;
+    & > div {
+      margin: 0.5rem;
+    }
+  }
+}
+// 头部搜索框和（重置、查询）按钮之间的间距样式
+.mr1rem {
+  margin-right: 1rem;
+}
+// 每个card标题的字体样式
+.cardTitle {
+  padding-left: 5px;
+  font-size: 14px;
+  font-weight: bold;
+  border-left: 5px solid #56c1ff;
+}
+.coreListBox {
+  border-radius: 0.5rem;
+  background-color: rgb(233, 246, 253);
+  padding: 0.5rem;
+  & > div {
+    padding: 0.5rem;
+    cursor: pointer;
+    border-radius: 0.5rem;
+    &:hover {
+      background-color: rgb(210, 239, 255);
+    }
+  }
+}
+// 核心指标中value的样式
+.core {
+  &_value {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  &_unit {
+    padding-left: 0.5rem;
+    font-size: 12px;
+    font-weight: bold;
+    color: #909399;
+  }
+  &_info {
+    font-size: 12px;
+    color: #909399;
+  }
+}
+</style>

src/components/doubleCarbon/print/doubleCarbonPrint.vue

@@ -1,11 +1,14 @@
+<!--
+    文印排放页面
+    @author 刘梦祥
+    @date 2023年2月8日
+-->
 <template>
-
+  <div>文印排放</div>
 </template>
 
 <script>
-export default {}
+export default {};
 </script>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>