双碳概览页面初始化完成，init方法有数据格式，请后台返回对象类似该结构或简单转换后可以成为该结构。另外三个页面类似该页面，复制粘贴即可。添加了dayjs插件，请install后启动项目。

package.json

@@ -11,6 +11,7 @@
     "animate.css": "^4.1.1",
     "ant-design-vue": "^1.7.8",
     "axios": "^1.2.6",
+    "dayjs": "^1.11.7",
     "echarts": "^5.4.1",
     "echarts-liquidfill": "^3.1.0",
     "element-resize-detector": "^1.2.4",

src/components/doubleCarbon/PV/doubleCarbonPv.vue

@@ -4,7 +4,7 @@
     @date 2023年2月8日
 -->
 <template>
-  <div>光伏发电页面</div>
+  <div>光伏发电页面类似双碳概览页面</div>
 </template>
 
 <script>

src/components/doubleCarbon/car/doubleCarbonCar.vue

@@ -4,7 +4,7 @@
     @date 2023年2月8日
 -->
 <template>
-  <div>车辆排放</div>
+  <div>车辆排放页面类似双碳概览页面</div>
 </template>
 
 <script>

src/components/doubleCarbon/overview/doubleCarbonOverview.vue

@@ -4,116 +4,314 @@
     @date 2023年2月8日
 -->
 <template>
-  <div class="doubleCarbon-main-box flexColumn">
+  <div class="doubleCarbon-main-box flexColumn" v-loading="searchLoading">
     <!-- 头部搜索区域 -->
-    <div>
-      <div class="flex flex_between">
+    <div class="borderColor">
+      <div class="flex flex_between margin5rem">
         <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 class="mr1rem">
+            单位名称：
+            <el-select v-model="searchParam.nameOfUnit" clearable placeholder="全部">
+              <el-option v-for="item in options.nameOfUnit" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div>
+            时间范围：
+            <el-date-picker
+              v-model="searchParam.timeRange"
+              type="monthrange"
+              align="right"
+              unlink-panels
+              range-separator="-"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :picker-options="$constant.PICKER_OPTIONS"
+            >
+            </el-date-picker>
+          </div>
         </div>
         <div>
-          <a-button class="mr1rem">重置</a-button>
-          <a-button type="primary">查询</a-button>
+          <a-button class="mr1rem" @click="reset">重置</a-button>
+          <a-button type="primary" @click="search">查询</a-button>
         </div>
       </div>
-      <div class="cardTitle">核心指标</div>
-      <div class="flex flex_around coreListBox">
+      <div class="cardTitle margin5rem">核心指标</div>
+      <div v-if="coreList.length > 0" class="flex flex_around coreListBox margin5rem">
         <div v-for="(item, index) in coreList" :key="'coreList' + index">
-          <div>{{ item.title }}</div>
+          <div class="core_title">{{ 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>
+            ><span class="core_leavel" v-if="item.leavel" :style="{ color: $constant.COLOR_LEAVEL[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>
+            <span class="core_info_title">{{ item.info.title }}</span
+            ><span class="core_info_value" :style="{ color: $constant.COLOR_LEAVEL[item.info.leavel] }"
+              >{{ item.info.value
+              }}<i
+                v-if="item.info.leavel && (item.info.leavel == 1 || item.info.leavel == 3)"
+                :class="item.info.leavel == 3 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
+            /></span>
           </div>
-          <a-divider v-if="index < coreList.length - 1" type="vertical" />
         </div>
       </div>
+      <div class="flex flex_around coreListBox margin5rem">
+        <el-empty v-if="coreList.length == 0" description="暂无数据"></el-empty>
+      </div>
     </div>
     <!-- 碳排放分析和碳配额构成 -->
-    <div>碳排放分析和碳配额构成</div>
-    <div>双碳新闻和碳排放占比</div>
+    <div class="flex" style="height:400px;">
+      <div class="echartBox_left borderColor">
+        <div class="cardTitle margin5rem">碳排放分析</div>
+        <div class="margin5rem chartDomBox">
+          <LineChart v-if="chartData.LineChartData" :echartData="chartData.LineChartData" />
+          <el-empty v-else description="暂无数据"></el-empty>
+        </div>
+      </div>
+      <div class="echartBox_right borderColor">
+        <div class="cardTitle margin5rem">碳配额构成</div>
+        <div class="margin5rem chartDomBox">
+          <BarChart v-if="chartData.BarChartData" :echartData="chartData.BarChartData" />
+          <el-empty v-else description="暂无数据"></el-empty>
+        </div>
+      </div>
+    </div>
+    <!-- 双碳新闻和碳排放占比 -->
+    <div class="flex" style="height:300px;">
+      <div class="echartBox_left borderColor">
+        <el-dialog title="双碳新闻" :visible.sync="showModalStatus" width="60%" :before-close="onCancel">
+          <p>{{ showModalInfo.title }}</p>
+          <div class="flex flex_between">
+            <div>{{ showModalInfo.author }}</div>
+            <div>{{ showModalInfo.pushTime }}</div>
+          </div>
+          <p>{{ showModalInfo.content }}</p>
+        </el-dialog>
+        <div class="cardTitle margin5rem">双碳新闻</div>
+        <div class="margin5rem" v-if="DoubleCarbonNewsInfoList.length > 0" style="overflow-y:auto;height: calc(100% - 53px);">
+          <div
+            class="flex flex_between DoubleCarbonNews"
+            v-for="(item, index) in DoubleCarbonNewsInfoList"
+            :key="index"
+            @click="showModal(item)"
+          >
+            <div>{{ item.title }}</div>
+            <div>{{ item.content }}</div>
+            <div>{{ item.author }}</div>
+            <div>{{ item.pushTime }}</div>
+            <div>>></div>
+          </div>
+        </div>
+        <div
+          class="margin5rem flex_center"
+          v-if="DoubleCarbonNewsInfoList.length == 0"
+          style="overflow-y:auto;height: calc(100% - 53px);"
+        >
+          <el-empty description="暂无数据"></el-empty>
+        </div>
+      </div>
+      <div class="echartBox_right borderColor">
+        <div class="cardTitle margin5rem">碳排放占比</div>
+        <div class="margin5rem chartDomBox">
+          <PieChart v-if="chartData.PieChartData" :echartData="chartData.PieChartData" />
+          <el-empty v-else description="暂无数据"></el-empty>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import LineChart from "../../echart/LineChart.vue";
+import BarChart from "../../echart/BarChart.vue";
+import PieChart from "../../echart/PieChart.vue";
 export default {
+  components: {
+    LineChart,
+    BarChart,
+    PieChart
+  },
   data() {
     return {
+      // loading状态
+      searchLoading: true,
       // 单位名称option可选值
       options: {
-        nameOfUnit: [{ value: "1", label: "type1" }, { value: "2", label: "type2" }]
+        nameOfUnit: []
       },
       // 头部搜索条件中绑定值
       searchParam: {
         nameOfUnit: "",
-        timeRange: ""
-      },
-      // 核心指标中的碳配额存量中的不同等级对应的icon颜色
-      colorLeavel: {
-        1: "#67C23A",
-        2: "#E6A23C",
-        3: "#F56C6C"
+        timeRange: []
       },
       // 头部核心指标循环显示数据
-      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%"
+      coreList: [],
+      // 双碳新闻模拟数据
+      DoubleCarbonNewsInfoList: [],
+      // 双碳新闻弹窗打开状态
+      showModalStatus: false,
+      // 弹窗暂存数据对象
+      showModalInfo: {
+        title: "--",
+        content: "--",
+        author: "--",
+        pushTime: "--"
+      },
+      // chart暂存数据对象
+      chartData: []
+    };
+  },
+  created() {},
+  mounted() {
+    // 页面初始化
+    this.init();
+  },
+  methods: {
+    init() {
+      // 初始化加载[单位名称列表、核心指标、碳排放分析、碳配额构成、双碳新闻、碳排放占比]
+      setTimeout(() => {
+        this.options.nameOfUnit = [
+          { value: "1", label: "中讯邮电咨询设计院有限公司" },
+          { value: "2", label: "北京电信规划设计院" }
+        ];
+        this.chartData = {
+          BarChartData: {
+            yAxisData: ["中讯", "北京规划院", "郑分", "广分", "上分"],
+            seriesData: {
+              碳配额存量: [120, 132, 101, 134, 90, 230, 210],
+              碳配额消耗: [220, 182, 191, 234, 290, 330, 310]
+            }
+          },
+          LineChartData: {
+            xAxisData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+            seriesData: {
+              中讯: [120, 132, 101, 134, 90, 230, 210],
+              北京规划院: [220, 182, 191, 234, 290, 330, 310],
+              郑分: [150, 232, 201, 154, 190, 330, 410],
+              广分: [320, 332, 301, 334, 390, 330, 320],
+              上分: [820, 932, 901, 934, 1290, 1330, 1320]
+            }
+          },
+          PieChartData: {
+            seriesName: "碳排放占比",
+            seriesData: [
+              { value: 1048, name: "汽油" },
+              { value: 735, name: "柴油" },
+              { value: 580, name: "天然气" },
+              { value: 484, name: "热力" },
+              { value: 300, name: "电力" },
+              { value: 199, name: "其他" }
+            ]
           }
-        },
-        {
-          title: "人均碳排放",
-          value: 80,
-          unit: "tCO2e/人",
-          info: {
-            title: "同比上升",
-            status: 1,
-            value: "0.4%"
+        };
+        this.DoubleCarbonNewsInfoList = [
+          {
+            title: "【减碳小妙招】",
+            content: "xxxxxxxxxxxxxxxxxxxxxxx",
+            author: "中讯邮电设计院-张三",
+            pushTime: "2021-08-09"
+          },
+          {
+            title: "【减碳小妙招】",
+            content: "xxxxxxxxxxxxxxxxxxxxxxx",
+            author: "中讯邮电设计院-张三",
+            pushTime: "2021-08-09"
+          },
+          {
+            title: "【减碳小妙招】",
+            content: "xxxxxxxxxxxxxxxxxxxxxxx",
+            author: "中讯邮电设计院-张三",
+            pushTime: "2021-08-09"
           }
-        },
-        {
-          title: "光伏减排",
-          value: 40,
-          unit: "tCO2e",
-          info: {
-            title: "同比上升",
-            status: 1,
-            value: "0.4%"
+        ];
+        this.coreList = [
+          {
+            title: "碳配额存量",
+            value: "60%",
+            leavel: 1
+          },
+          {
+            title: "碳排放存量",
+            value: 500,
+            unit: "tCO2e",
+            info: {
+              title: "同比上升",
+              leavel: 3,
+              value: "0.4%"
+            }
+          },
+          {
+            title: "单位面积碳排放",
+            value: 380,
+            unit: "tCO2e/m²",
+            info: {
+              title: "同比上升",
+              leavel: 3,
+              value: "0.4%"
+            }
+          },
+          {
+            title: "人均碳排放",
+            value: 80,
+            unit: "tCO2e/人",
+            info: {
+              title: "同比上升",
+              leavel: 3,
+              value: "0.4%"
+            }
+          },
+          {
+            title: "光伏减排",
+            value: 40,
+            unit: "tCO2e",
+            info: {
+              title: "同比上升",
+              leavel: 3,
+              value: "0.4%"
+            }
+          },
+          {
+            title: "值得关注",
+            value: "减少2辆车出行一周"
           }
-        },
-        {
-          title: "值得关注",
-          value: "减少2辆车出行一周"
-        }
-      ]
-    };
-  },
-  mounted() {},
-  methods: {}
+        ];
+        this.searchLoading = false;
+      }, 1000);
+    },
+    // 查询事件
+    search() {
+      this.searchLoading = true;
+      console.log(
+        "查询条件：",
+        this.searchParam.nameOfUnit,
+        this.searchParam.timeRange[0] ? this.$dayjs(this.searchParam.timeRange[0]).format("YYYY-MM-DD 00:00:00") : "",
+        this.searchParam.timeRange[1] ? this.$dayjs(this.searchParam.timeRange[1]).format("YYYY-MM-DD 00:00:00") : ""
+      );
+      setTimeout(() => {
+        this.searchLoading = false;
+      }, 1000);
+    },
+    // 重置事件
+    reset() {
+      this.searchParam = {
+        nameOfUnit: "",
+        timeRange: []
+      };
+    },
+    // 弹窗显示事件
+    showModal(item) {
+      this.showModalStatus = true;
+      this.showModalInfo = item;
+    },
+    // 弹窗隐藏事件
+    onCancel() {
+      this.$confirm("确认关闭？")
+        .then(_ => {
+          this.showModalStatus = false;
+        })
+        .catch(_ => {});
+    }
+  }
 };
 </script>
 
@@ -129,28 +327,57 @@ export default {
   display: flex;
   flex-wrap: wrap;
   align-content: center;
+  align-items: center;
   &_center {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    align-items: center;
     justify-content: center;
   }
   &_between {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    align-items: center;
     justify-content: space-between;
   }
   &_around {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    align-items: center;
     justify-content: space-around;
   }
 }
+.borderColor {
+  border: 1px solid #e7eaf1;
+}
+.margin5rem {
+  margin: 0.5rem;
+}
+.padding5rem {
+  padding: 0.5rem;
+}
 // 页面主题样式
 .doubleCarbon-main-box {
   width: calc(100% - 16px);
   height: calc(100% - 16px);
+  & * {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    ::-webkit-scrollbar {
+      width: 0 !important;
+    }
+    -ms-overflow-style: none;
+    overflow: -moz-scrollbars-none;
+  }
   & > div {
-    padding: 5px 10px;
+    // padding: 5px 10px;
     border-radius: 2px;
-    border: 1px solid #e7eaf1;
     margin-bottom: 10px;
-    & > div {
-      margin: 0.5rem;
-    }
   }
 }
 // 头部搜索框和（重置、查询）按钮之间的间距样式
@@ -162,27 +389,47 @@ export default {
   padding-left: 5px;
   font-size: 14px;
   font-weight: bold;
-  border-left: 5px solid #56c1ff;
+  border-left: 5px solid @primary-color;
 }
+// 核心指标
 .coreListBox {
   border-radius: 0.5rem;
   background-color: rgb(233, 246, 253);
-  padding: 0.5rem;
   & > div {
-    padding: 0.5rem;
+    position: relative;
+    // border-left: 1px solid #909399;
+    padding: 10px;
+    margin: 10px;
     cursor: pointer;
     border-radius: 0.5rem;
     &:hover {
       background-color: rgb(210, 239, 255);
     }
+    // &::before {
+    //   content: "";
+    //   position: absolute;
+    //   left: -10px;
+    //   height: calc(100% - 20px);
+    //   width: 1px;
+    //   background: #c9c9c9;
+    // }
   }
 }
 // 核心指标中value的样式
 .core {
-  &_value {
-    font-size: 14px;
+  &_title {
+    font-size: 12px;
+    padding-bottom: 10px;
+  }
+  &_leavel {
+    font-size: 16px;
     font-weight: bold;
   }
+  &_value {
+    font-size: 16px;
+    font-weight: 500;
+    color: #000;
+  }
   &_unit {
     padding-left: 0.5rem;
     font-size: 12px;
@@ -190,8 +437,44 @@ export default {
     color: #909399;
   }
   &_info {
+    padding-top: 10px;
     font-size: 12px;
-    color: #909399;
+    &_title {
+      color: #afafaf;
+    }
+    &_value {
+      padding-left: 0.5rem;
+      font-weight: bold;
+    }
+  }
+}
+// echartBox样式
+.echartBox {
+  &_left {
+    width: calc(100% - 300px - 10px);
+    height: 100%;
+  }
+  &_right {
+    margin-left: 10px;
+    width: 300px;
+    height: 100%;
+  }
+}
+.chartDomBox {
+  position: relative;
+  width: calc(100% - 20px);
+  height: calc(100% - 41px);
+  display: flex;
+  justify-content: center;
+}
+.DoubleCarbonNews {
+  padding: 10px 0;
+  font-weight: bold;
+  color: #000;
+  cursor: pointer;
+  border-bottom: 1px solid #c9c9c9;
+  &:hover {
+    color: @primary-color;
   }
 }
 </style>

src/components/doubleCarbon/print/doubleCarbonPrint.vue

@@ -4,7 +4,7 @@
     @date 2023年2月8日
 -->
 <template>
-  <div>文印排放</div>
+  <div>文印排放页面类似双碳概览页面</div>
 </template>
 
 <script>

src/components/echart/BarChart.vue

@@ -0,0 +1,83 @@
+<!--
+    柱状图组件
+    @author 刘梦祥
+    @date 2023年2月9日
+-->
+<template>
+  <root-echart :option="option" class="BarChart" />
+</template>
+
+<script>
+import RootEchart from "./rootEchart.vue";
+export default {
+  name: "BarChart",
+  components: {
+    RootEchart
+  },
+  props: ["echartData"],
+  data() {
+    return {
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "value"
+        },
+        yAxis: {
+          type: "category",
+          data: []
+        },
+        series: []
+      }
+    };
+  },
+  created() {},
+  methods: {},
+  watch: {
+    echartData: {
+      handler(val) {
+        let _options = Object.assign({}, this.option);
+        _options.yAxis.data = val.yAxisData;
+        _options.series = [];
+        for (let key in val.seriesData) {
+          let seriesItem = {
+            name: key,
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: "series"
+            },
+            data: val.seriesData[key]
+          };
+          _options.series.push(seriesItem);
+        }
+        this.option = _options;
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.BarChart {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/echart/LineChart.vue

@@ -0,0 +1,105 @@
+<!--
+    折线图组件
+    @author 刘梦祥
+    @date 2023年2月9日
+-->
+<template>
+  <root-echart :option="option" class="LineChart" />
+</template>
+
+<script>
+import RootEchart from "./rootEchart.vue";
+export default {
+  name: "LineChart",
+  components: {
+    RootEchart
+  },
+  props: ["echartData"],
+  data() {
+    return {
+      option: {
+        title: {
+          show: false,
+          text: "Line"
+        },
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          data: []
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "50px",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: []
+        },
+        yAxis: {
+          type: "value"
+        },
+        dataZoom: [
+          {
+            type: "inside",
+            start: 0,
+            end: 20
+          },
+          {
+            start: 0,
+            end: 20
+          }
+        ],
+        series: []
+      }
+    };
+  },
+  created() {},
+  methods: {},
+  watch: {
+    echartData: {
+      handler(val) {
+        let _options = Object.assign({}, this.option);
+        _options.xAxis.data = val.xAxisData;
+        _options.legend.data = [];
+        _options.series = [];
+        let index = 0;
+        for (let key in val.seriesData) {
+          let seriesItem = {
+            name: key,
+            type: "line",
+            stack: "Total",
+            itemStyle: {
+              normal: {
+                color: key == "中讯" ? "#F56C6C" : this.$constant.ECHART_LINE_COLOR_LIST[index],
+                lineStyle: {
+                  color: key == "中讯" ? "#F56C6C" : this.$constant.ECHART_LINE_COLOR_LIST[index],
+                  width: 2
+                }
+              }
+            },
+            data: val.seriesData[key]
+          };
+          _options.legend.data.push(key);
+          _options.series.push(seriesItem);
+          index < 5 ? (key == "中讯" ? (index = index) : index++) : (index = 0);
+        }
+        this.option = _options;
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.LineChart {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/echart/PieChart.vue

@@ -0,0 +1,75 @@
+<!--
+    饼状图组件
+    @author 刘梦祥
+    @date 2023年2月9日
+-->
+<template>
+  <root-echart :option="option" class="PieChart" />
+</template>
+
+<script>
+import RootEchart from "./rootEchart.vue";
+export default {
+  name: "PieChart",
+  components: {
+    RootEchart
+  },
+  props: ["echartData"],
+  data() {
+    return {
+      option: {
+        tooltip: {
+          trigger: "item"
+        },
+        legend: {
+          top: "bottom"
+        },
+        series: [
+          {
+            name: "暂无数据",
+            type: "pie",
+            radius: ["30%", "45%"],
+            center: ["50%", "40%"],
+            label: {
+              alignTo: "edge",
+              formatter: "{name|{b}}\n{value|{c}}",
+              minMargin: 5,
+              edgeDistance: 10,
+              lineHeight: 15,
+              rich: {
+                time: {
+                  fontSize: 10,
+                  color: "#999"
+                }
+              }
+            },
+            data: [{ value: 0, name: "暂无数据" }]
+          }
+        ]
+      }
+    };
+  },
+  created() {},
+  methods: {},
+  watch: {
+    echartData: {
+      handler(val) {
+        let _options = Object.assign({}, this.option);
+        _options.series[0].name = val.seriesName;
+        _options.series[0].data = val.seriesData;
+        this.option = _options;
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.PieChart {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/echart/rootEchart.vue

@@ -0,0 +1,67 @@
+<!--
+    echart组件
+    @author 刘梦祥
+    @date 2023年2月9日
+-->
+<template>
+  <div name="mechart" ref="mechart" class="mechart"></div>
+</template>
+<script>
+export default {
+  props: {
+    option: Object
+  },
+  data() {
+    return {
+      myChart: ""
+    };
+  },
+  computed: {
+    watchOptionStr() {
+      let a = this.option;
+      return JSON.stringify(a);
+    }
+  },
+  watch: {
+    watchOptionStr: {
+      handler: function(val, oldVal) {
+        if (val !== oldVal && this.myChart) {
+          this.myChart.setOption(this.option, true);
+        }
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener("resize", this.resizeChart);
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.resizeChart);
+    if (this.myChart) {
+      this.myChart.dispose();
+    }
+  },
+  methods: {
+    resizeChart() {
+      if (this.myChart !== "") {
+        this.myChart.resize();
+      }
+    },
+    initChart() {
+      this.myChart = this.$echarts.init(this.$refs.mechart);
+      if (this.option) {
+        this.myChart.setOption(this.option);
+      }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.mechart {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>

src/main.js

@@ -10,8 +10,8 @@ import * as echarts from 'echarts';
 import 'animate.css/animate.min.css'
 import 'element-ui/lib/theme-chalk/index.css';
 import locale from 'element-ui/lib/locale/lang/zh-CN'
-
 import { HappyScroll } from 'vue-happy-scroll'
+import dayjs from "dayjs"
 //自定义组件名
 Vue.component('happy-scroll', HappyScroll)
 // 引入css
@@ -20,11 +20,12 @@ import 'vue-happy-scroll/docs/happy-scroll.css'
 // 全局方法
 import util from '@/utils/index'
 // 常量
-import constant from '@/utils/constant'
+import constant from '@/utils/constant.js'
 
 Vue.prototype.$util = util
 Vue.prototype.$constant = constant
 Vue.prototype.$echarts = echarts
+Vue.prototype.$dayjs = dayjs
 
 Vue.use(Antd)
 Vue.use(ElementUI, {locale});

src/utils/constant.js

@@ -1,4 +1,52 @@
-// 常量
-export default {
+// 常量-时间范围快捷搜索条件
+const PICKER_OPTIONS = {
+    shortcuts: [
+        {
+            text: "去年十二个月",
+            onClick(picker) {
+                const end = new Date(new Date().getFullYear() - 1, 11);
+                const start = new Date(new Date().getFullYear() - 1, 0);
+                picker.$emit("pick", [start, end]);
+            }
+        },
+        {
+            text: "今年至今",
+            onClick(picker) {
+                const end = new Date();
+                const start = new Date(new Date().getFullYear(), 0);
+                picker.$emit("pick", [start, end]);
+            }
+        },
+        {
+            text: "最近十二个月",
+            onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setMonth(start.getMonth() - 11);
+                picker.$emit("pick", [start, end]);
+            }
+        },
+        {
+            text: "最近六个月",
+            onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setMonth(start.getMonth() - 5);
+                picker.$emit("pick", [start, end]);
+            }
+        }
+    ]
+}
 
+// 核心指标中的碳配额存量中的不同等级对应的icon颜色(1：绿色、2：黄色、3：红色)
+const COLOR_LEAVEL = {
+    1: "#67C23A",
+    2: "#E6A23C",
+    3: "#F56C6C"
 }
+
+// 折线图可选颜色
+const ECHART_LINE_COLOR_LIST = ["#303133", "#606266", "#909399", "#C0C4CC", "DCDFE6"];
+export default {
+    PICKER_OPTIONS, COLOR_LEAVEL, ECHART_LINE_COLOR_LIST
+}

vite.config.js

@@ -103,6 +103,7 @@ export default defineConfig(({ command }) => {
       // }),
     ],
     server: {
+      host: "0.0.0.0",
       port: 8080,
       proxy: {},
       open: false,