diff --git a/src/api/desulfurization/energyAnalysis.js b/src/api/desulfurization/energyAnalysis.js
new file mode 100644
index 0000000..77591f7
--- /dev/null
+++ b/src/api/desulfurization/energyAnalysis.js
@@ -0,0 +1,10 @@
+import request from "@/utils/request";
+
+// so2浓度与小苏打用量
+export function fgdScrEnergy(data) {
+  return request({
+    url: '/fgdScr/energy/sys/query',
+    method: 'post',
+    data: data
+  })
+}
\ No newline at end of file
diff --git a/src/views/components/densityAndDasage.vue b/src/views/components/densityAndDasage.vue
new file mode 100644
index 0000000..a156010
--- /dev/null
+++ b/src/views/components/densityAndDasage.vue
@@ -0,0 +1,505 @@
+<template>
+  <div style="width: 100%; height: 100%">
+      <div class="charts" ref="chart_ref"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import { fgdScrEnergy } from "@/api/desulfurization/energyAnalysis";
+export default {
+  data() {
+    return {
+      energyTypes: [],
+      sharedIndex: 0,
+      chartInstance: null,
+      option: {},
+      colorList: [
+        {
+          color: "#00CED1",
+          offsetColor1: "rgba(0, 206, 209, 0.5)",
+          offsetColor2: "rgba(0, 206, 209, 0)",
+        },
+        {
+          color: "#ffe21e",
+          offsetColor1: "rgba(255,226,30, 0.5)",
+          offsetColor2: "rgba(255,226,30, 0)",
+        },
+        {
+          color: "#1a69f1",
+          offsetColor1: "rgba(26, 105, 241, 0.5)",
+          offsetColor2: "rgba(26, 105, 241, 0)",
+        },
+        {
+          color: "#2df499",
+          offsetColor1: "rgba(45,244,153, 0.5)",
+          offsetColor2: "rgba(45,244,153, 0)",
+        },
+        {
+          color: "#e87b4b",
+          offsetColor1: "rgba(232, 123, 75, 0.5)",
+          offsetColor2: "rgba(232, 123, 75, 0)",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.initChart();
+    window.addEventListener("resize", this.screenAdapter);
+    this.screenAdapter();
+    this.echartsData();
+  },
+  destroyed() {
+    //取消监听器
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  methods: {
+    // 选择日月年
+    handleEnter(index, event) {
+      console.log("index", index);
+      console.log("event", event);
+      this.chartInstance.dispose();
+      this.initChart();
+      this.sharedIndex = index;
+      // 使用 find 方法查找符合条件的对象
+      const chartsObj = this.energyTypes.find((item) => item.name === event);
+      const colorObj = this.colorList.find(
+        (_, currentIndex) => currentIndex === index
+      );
+      console.log("当前要渲染的数据对象", chartsObj);
+      console.log("当前要渲染的颜色对象", colorObj);
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 50;
+      let adapterOption = {};
+      // 添加折线的配置
+      adapterOption = {
+        tooltip: {
+          trigger: "axis",
+          // 自定义 tooltip 内容
+          formatter: function (params) {
+            var res = params[0].name + "<br/>";
+            for (var i = 0, l = params.length; i < l; i++) {
+              var seriesName = params[i].seriesName;
+              var value = params[i].value;
+              var marker =
+                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
+                params[i].color +
+                '"></span>';
+              // 根据不同德seriesName 返回不同的单位
+              if (chartsObj.unit) {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  chartsObj.unit +
+                  "</span><br>";
+              } else {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  "</span><br>";
+              }
+            }
+            return res;
+          },
+        },
+        xAxis: {
+          data: chartsObj.timeStr,
+        //   axisLabel: {
+        //     fontSize: titleFontSize,
+        //   },
+        },
+        yAxis: {
+          name: chartsObj.unit,
+        //   nameTextStyle: {
+        //     fontSize: titleFontSize,
+        //   },
+        //   axisLabel: {
+        //     fontSize: titleFontSize,
+        //   },
+        },
+        series: [
+          {
+            data: chartsObj.data,
+            name: event,
+            //折线颜色
+            itemStyle: {
+              color: colorObj.color, //折线的颜色
+            },
+            lineStyle: {
+              color: colorObj.color, //折线点的颜色
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: colorObj.offsetColor1, // 渐变起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: colorObj.offsetColor2, // 渐变结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+          },
+        ],
+      };
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance.resize();
+    },
+    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
+    screenAdapter() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
+      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+      const adapterOption = {};
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance.resize();
+    },
+    //初始化chartInstance对象
+    initChart() {
+      this.chartInstance = echarts.init(this.$refs.chart_ref);
+      this.option = {
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          show: false,
+        },
+        grid: {
+          top: "15%",
+          left: "4%",
+          right: "6%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          //设置为true代表离零刻度间隔一段距离
+          boundaryGap: true,
+          // 修饰刻度标签的颜色即x坐标数据
+          axisLabel: {
+            // interval: 0, //强制显示所有x轴数据
+            // rotate: 30, //x轴坐标字体倾斜30度
+            color: "rgba(255, 255, 255, 1)",
+          },
+          axisTick: {
+            show: false, // 不显示坐标轴刻度线
+          },
+          // x坐标轴的颜色
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#365576",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#e2e6f0",
+            },
+          }, //x轴分割线
+        },
+        yAxis: {
+          min: 0,
+          // max:20,
+          // // // min:'dataMin',
+          // // // max:'dataMax',
+          // name: "kwh", // 第一个 y 轴的单位描述
+          // 设置 name 的样式
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 1)",
+            fontSize: 12,
+          },
+          miniInterval: 5,
+          type: "value",
+          // 修饰刻度标签的颜色即y坐标数据
+          axisLabel: {
+            color: "rgba(255, 255, 255, 1)",
+          },
+          // 显示y坐标轴
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#365576", // 设置 y 轴线的颜色
+            },
+          },
+          //y轴分割线段数
+          // splitNumber: 10,
+          // 修改y轴分割线的颜色
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62", // 设置分割线的颜色
+              type: "dashed", // 设置分割线为虚线
+            },
+          },
+        },
+        series: [
+          {
+            type: "line",
+            // 拐点大小
+            symbolSize: 8,
+          },
+        ],
+      };
+      //把配置项给实例对象
+      this.chartInstance.setOption(this.option, true);
+    },
+    echartsData() {
+      const now = new Date();
+      const endTime = now.toISOString().slice(0, 19).replace("T", " ");
+      const startTime = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+        .toISOString()
+        .slice(0, 19)
+        .replace("T", " ");
+
+      const params = {
+        timeType: "min",
+        startTime: startTime,
+        endTime: endTime,
+        systemType: "8",
+        pageNum: 0,
+        pageSize: 10,
+      };
+
+      fgdScrEnergy(params).then((res) => {
+        console.log("折线图返回值", res);
+        if (res.code === 200 && res.data && res.data.length > 0) {
+          const dataMap = {};
+          res.data.forEach((item) => {
+            const key = Object.keys(item)[0];
+            dataMap[key] = item[key];
+          });
+
+          const timeStrArr = dataMap.timeStrArr || [];
+
+          const so1Data = dataMap.so1 || [];
+          const so2Data = dataMap.so2 || [];
+          const loadCellData = dataMap.loadCell || [];
+          
+          const allData = [...so1Data, ...so2Data, ...loadCellData].map(Number);
+          const maxValue = Math.max(...allData, 1);
+          const minValue = Math.min(...allData.filter(v => v > 0), 0);
+          
+          this.chartInstance.setOption({
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                type: "cross",
+              },
+              formatter: function (params) {
+                var res = params[0].name + "<br/>";
+                for (var i = 0, l = params.length; i < l; i++) {
+                  var seriesName = params[i].seriesName;
+                  var value = params[i].value;
+                  var marker =
+                    '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
+                    params[i].color +
+                    '"></span>';
+                  var unit = seriesName.includes("SO2") ? "mg/m³" : "mg";
+                  res +=
+                    marker +
+                    seriesName +
+                    ":" +
+                    '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                    value +
+                    unit +
+                    "</span><br>";
+                }
+                return res;
+              },
+            },
+            legend: {
+              show: true,
+              data: ["进SO2浓度", "出SO2浓度", "loadCell"],
+              textStyle: {
+                color: "#ffffff",
+              },
+              top: "0%",
+            },
+            grid: {
+              left: "8%",
+              right: "8%",
+              top: "15%",
+              bottom: "5%",
+              containLabel: true,
+            },
+            xAxis: {
+              type: "category",
+              data: timeStrArr,
+              axisLabel: {
+                color: "rgba(255, 255, 255, 1)",
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: "#365576",
+                },
+              },
+            },
+            yAxis: [
+              {
+                type: "value",
+                name: "mg/m³",
+                nameTextStyle: {
+                  color: "rgba(255, 255, 255, 1)",
+                  fontSize: 12,
+                  padding: [0, 0, 10, 0],
+                },
+                min: minValue * 0.9 || 0,
+                max: maxValue * 1.1,
+                interval: (maxValue * 1.1 - (minValue * 0.9 || 0)) / 5,
+                axisLabel: {
+                  color: "rgba(255, 255, 255, 1)",
+                },
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: "#365576",
+                  },
+                },
+                splitLine: {
+                  lineStyle: {
+                    color: "#1a3d62",
+                    type: "dashed",
+                  },
+                },
+              },
+              {
+                type: "value",
+                name: "mg",
+                nameTextStyle: {
+                  color: "rgba(255, 255, 255, 1)",
+                  fontSize: 12,
+                  padding: [0, 10, 0, 0],
+                },
+                min: minValue * 0.9 || 0,
+                max: maxValue * 1.1,
+                interval: (maxValue * 1.1 - (minValue * 0.9 || 0)) / 5,
+                axisLabel: {
+                  color: "rgba(255, 255, 255, 1)",
+                },
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: "#365576",
+                  },
+                },
+                splitLine: {
+                  show: false,
+                },
+              },
+            ],
+            series: [
+              {
+                name: "进SO2浓度",
+                type: "line",
+                yAxisIndex: 0,
+                data: so1Data,
+                symbolSize: 8,
+                itemStyle: {
+                  color: "#00CED1",
+                },
+                lineStyle: {
+                  color: "#00CED1",
+                },
+                areaStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(0, 206, 209, 0.5)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(0, 206, 209, 0)",
+                      },
+                    ],
+                    global: false,
+                  },
+                },
+              },
+              {
+                name: "出SO2浓度",
+                type: "line",
+                yAxisIndex: 0,
+                data: so2Data,
+                symbolSize: 8,
+                itemStyle: {
+                  color: "#ffe21e",
+                },
+                lineStyle: {
+                  color: "#ffe21e",
+                },
+                areaStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(255, 226, 30, 0.5)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(255, 226, 30, 0)",
+                      },
+                    ],
+                    global: false,
+                  },
+                },
+              },
+              {
+                name: "loadCell",
+                type: "bar",
+                yAxisIndex: 1,
+                data: loadCellData,
+                barWidth: "40%",
+                itemStyle: {
+                  color: "#1a69f1",
+                  borderRadius: [4, 4, 0, 0],
+                },
+              },
+            ],
+          });
+
+          this.chartInstance.resize();
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.charts {
+  margin-top: 20px;
+  width: 100%;
+  height: 250px;
+}
+</style>
diff --git a/src/views/components/sodaDailyDosage.vue b/src/views/components/sodaDailyDosage.vue
new file mode 100644
index 0000000..79b5f97
--- /dev/null
+++ b/src/views/components/sodaDailyDosage.vue
@@ -0,0 +1,312 @@
+<template>
+  <div style="width: 100%; height: 100%">
+      <div class="charts" ref="chart_ref"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import { fgdScrEnergy } from "@/api/desulfurization/energyAnalysis";
+export default {
+  data() {
+    return {
+      energyTypes: [],
+      sharedIndex: 0,
+      chartInstance: null,
+      option: {},
+      colorList: [
+        {
+          color: "#00CED1",
+          offsetColor1: "rgba(0, 206, 209, 0.5)",
+          offsetColor2: "rgba(0, 206, 209, 0)",
+        },
+        {
+          color: "#ffe21e",
+          offsetColor1: "rgba(255,226,30, 0.5)",
+          offsetColor2: "rgba(255,226,30, 0)",
+        },
+        {
+          color: "#1a69f1",
+          offsetColor1: "rgba(26, 105, 241, 0.5)",
+          offsetColor2: "rgba(26, 105, 241, 0)",
+        },
+        {
+          color: "#2df499",
+          offsetColor1: "rgba(45,244,153, 0.5)",
+          offsetColor2: "rgba(45,244,153, 0)",
+        },
+        {
+          color: "#e87b4b",
+          offsetColor1: "rgba(232, 123, 75, 0.5)",
+          offsetColor2: "rgba(232, 123, 75, 0)",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.initChart();
+    window.addEventListener("resize", this.screenAdapter);
+    this.screenAdapter();
+    this.echartsData();
+  },
+  destroyed() {
+    //取消监听器
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  methods: {
+    // 选择日月年
+    handleEnter(index, event) {
+      console.log("index", index);
+      console.log("event", event);
+      this.chartInstance.dispose();
+      this.initChart();
+      this.sharedIndex = index;
+      // 使用 find 方法查找符合条件的对象
+      const chartsObj = this.energyTypes.find((item) => item.name === event);
+      const colorObj = this.colorList.find(
+        (_, currentIndex) => currentIndex === index
+      );
+      console.log("当前要渲染的数据对象", chartsObj);
+      console.log("当前要渲染的颜色对象", colorObj);
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 50;
+      let adapterOption = {};
+      // 添加折线的配置
+      adapterOption = {
+        tooltip: {
+          trigger: "axis",
+          // 自定义 tooltip 内容
+          formatter: function (params) {
+            var res = params[0].name + "<br/>";
+            for (var i = 0, l = params.length; i < l; i++) {
+              var seriesName = params[i].seriesName;
+              var value = params[i].value;
+              var marker =
+                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
+                params[i].color +
+                '"></span>';
+              // 根据不同德seriesName 返回不同的单位
+              if (chartsObj.unit) {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  chartsObj.unit +
+                  "</span><br>";
+              } else {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  "</span><br>";
+              }
+            }
+            return res;
+          },
+        },
+        xAxis: {
+          data: chartsObj.timeStr,
+        //   axisLabel: {
+        //     fontSize: titleFontSize,
+        //   },
+        },
+        yAxis: {
+          name: chartsObj.unit,
+        //   nameTextStyle: {
+        //     fontSize: titleFontSize,
+        //   },
+        //   axisLabel: {
+        //     fontSize: titleFontSize,
+        //   },
+        },
+        series: [
+          {
+            data: chartsObj.data,
+            name: event,
+            //折线颜色
+            itemStyle: {
+              color: colorObj.color, //折线的颜色
+            },
+            lineStyle: {
+              color: colorObj.color, //折线点的颜色
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: colorObj.offsetColor1, // 渐变起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: colorObj.offsetColor2, // 渐变结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+          },
+        ],
+      };
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance.resize();
+    },
+    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
+    screenAdapter() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
+      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+      const adapterOption = {};
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance.resize();
+    },
+    //初始化chartInstance对象
+    initChart() {
+      this.chartInstance = echarts.init(this.$refs.chart_ref);
+      this.option = {
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          show: false,
+        },
+        grid: {
+          top: "15%",
+          left: "4%",
+          right: "6%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          //设置为true代表离零刻度间隔一段距离
+          boundaryGap: true,
+          // 修饰刻度标签的颜色即x坐标数据
+          axisLabel: {
+            // interval: 0, //强制显示所有x轴数据
+            // rotate: 30, //x轴坐标字体倾斜30度
+            color: "rgba(255, 255, 255, 1)",
+          },
+          axisTick: {
+            show: false, // 不显示坐标轴刻度线
+          },
+          // x坐标轴的颜色
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#365576",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#e2e6f0",
+            },
+          }, //x轴分割线
+        },
+        yAxis: {
+          min: 0,
+          // max:20,
+          // // // min:'dataMin',
+          // // // max:'dataMax',
+          // name: "kwh", // 第一个 y 轴的单位描述
+          // 设置 name 的样式
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 1)",
+            fontSize: 12,
+          },
+          miniInterval: 5,
+          type: "value",
+          // 修饰刻度标签的颜色即y坐标数据
+          axisLabel: {
+            color: "rgba(255, 255, 255, 1)",
+          },
+          // 显示y坐标轴
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#365576", // 设置 y 轴线的颜色
+            },
+          },
+          //y轴分割线段数
+          // splitNumber: 10,
+          // 修改y轴分割线的颜色
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62", // 设置分割线的颜色
+              type: "dashed", // 设置分割线为虚线
+            },
+          },
+        },
+        series: [
+          {
+            type: "line",
+            // 拐点大小
+            symbolSize: 8,
+          },
+        ],
+      };
+      //把配置项给实例对象
+      this.chartInstance.setOption(this.option, true);
+    },
+    echartsData() {
+      const now = new Date();
+      const endTime = now.toISOString().slice(0, 10);
+      const startTime = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000)
+        .toISOString()
+        .slice(0, 10);
+
+      const params = {
+        timeType: "day",
+        startTime: startTime,
+        endTime: endTime,
+        systemType: "8",
+        pageNum: 0,
+        pageSize: 10,
+      };
+
+      fgdScrEnergy(params).then((res) => {
+        console.log("折线图返回值", res);
+        if (res.code === 200 && res.data && res.data.length > 0) {
+          const dataMap = {};
+          res.data.forEach((item) => {
+            const key = Object.keys(item)[0];
+            dataMap[key] = item[key];
+          });
+
+          this.energyTypes = [
+            {
+              name: "小苏打日用量",
+              data: dataMap.loadCell || [],
+              timeStr: dataMap.timeStrArr || [],
+              unit: "mg",
+            },
+          ];
+
+          if (this.energyTypes.length > 0) {
+            this.handleEnter(0, this.energyTypes[0].name);
+          }
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.charts {
+  margin-top: 20px;
+  width: 100%;
+  height: 250px;
+}
+</style>
diff --git a/src/views/desulfurization/desMonitor/desMonitorCenter.vue b/src/views/desulfurization/desMonitor/desMonitorCenter.vue
index e87b7eb..805d6f2 100644
--- a/src/views/desulfurization/desMonitor/desMonitorCenter.vue
+++ b/src/views/desulfurization/desMonitor/desMonitorCenter.vue
@@ -4,7 +4,7 @@
       <img class="title-left" src="../../../assets/images/title-left.png" alt="" />
       <img class="title-center" @click="goSys" src="../../../assets/images/title-center.png" alt="" />
       <img class="title-right" src="../../../assets/images/title-right.png" alt="" />
-      <div class="sys-title" @click="goSys">铭汉空压热回收系统</div>
+      <div class="sys-title" @click="goSys">铭汉脱硫系统</div>
       <!-- logo -->
       <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
       <div class="nowTime">{{ formattedDate }}</div>
diff --git a/src/views/desulfurization/energyAnalysis/index.vue b/src/views/desulfurization/energyAnalysis/index.vue
index e69de29..b2c8553 100644
--- a/src/views/desulfurization/energyAnalysis/index.vue
+++ b/src/views/desulfurization/energyAnalysis/index.vue
@@ -0,0 +1,1046 @@
+<template>
+  <div class="main-body">
+    <div class="irregular-border">
+      <div class="main-content">
+        <div class="condition">
+          <div class="condition-left">
+            <div class="time-label">时间类型:</div>
+            <el-radio-group
+              v-model="dateType"
+              style="margin-right: 0.24rem"
+              @change="updateDateType"
+            >
+              <el-radio label="min">分钟</el-radio>
+              <el-radio label="hour">小时</el-radio>
+              <el-radio label="day">日</el-radio>
+              <el-radio label="month">月</el-radio>
+              <el-radio label="year">年</el-radio>
+            </el-radio-group>
+            <el-date-picker
+              v-model="timeDate"
+              :default-time="['00:00:00', '23:59:59']"
+              type="datetimerange"
+              range-separator="至"
+              v-if="dateType == 'hour' || dateType == 'min'"
+              placeholder="选择日期"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+            <el-date-picker
+              v-model="dayDate"
+              type="daterange"
+              v-if="dateType == 'day'"
+              :key="this.dateType"
+              range-separator="至"
+              value-format="yyyy-MM-dd"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="dateChange"
+            >
+            </el-date-picker>
+            <el-date-picker
+              v-model="monthDate"
+              type="monthrange"
+              v-if="dateType == 'month'"
+              :key="this.dateType"
+              range-separator="至"
+              start-placeholder="开始月份"
+              end-placeholder="结束月份"
+              value-format="yyyy-MM"
+              @change="dateChange"
+            >
+            </el-date-picker>
+            <div
+              class="years-div"
+              v-if="dateType == 'year'"
+              :key="this.dateType"
+            >
+              <el-date-picker
+                v-model="startYear"
+                type="year"
+                placeholder="选择开始年份"
+                style="width: 180px"
+                value-format="yyyy"
+              >
+              </el-date-picker>
+              <div class="years-word">至</div>
+              <el-date-picker
+                v-model="endYear"
+                type="year"
+                placeholder="选择结束年份"
+                style="width: 180px"
+                value-format="yyyy"
+              >
+              </el-date-picker>
+            </div>
+            <!-- <el-select
+              style="margin-left: 0.12rem"
+              v-model="systemType"
+              placeholder="请选择系统类型"
+              clearable
+            >
+              <el-option
+                v-for="dict in systemTypes"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              />
+            </el-select> -->
+            <div class="success-btn">
+              <el-button
+                type="success"
+                style="margin-left: 0.12rem"
+                @click="findData"
+                >查询</el-button
+              >
+            </div>
+            <div class="primary-btn">
+              <el-button type="primary" @click="leadingPrint">打印</el-button>
+            </div>
+            <div class="warning-btn">
+              <el-button type="warning" @click="exportData">导出</el-button>
+            </div>
+          </div>
+        </div>
+        <div class="charts-table">
+          <div class="connect-div" v-loading="listLoading">
+            <div class="charts-title">{{ this.titleDate }}数据分析</div>
+            <div class="charts_refs" ref="charts_refs"></div>
+            <div class="table-content" style="width: 100%">
+              <el-table :data="tableData" style="width: 100%" stripe>
+                <el-table-column prop="date" label="时间"> </el-table-column>
+                <el-table-column v-if="timeType === 'min'" prop="coldData" label="进SO2浓度(mg/m³)">
+                </el-table-column>
+                <el-table-column v-if="timeType === 'min'" prop="electData" label="出SO2浓度(mg/m³)">
+                </el-table-column>
+                <el-table-column prop="copData" label="小苏打用量(mg)"> </el-table-column>
+              </el-table>
+              <div class="page">
+                <el-pagination
+                  background
+                  style="width: 100%; height: 20%"
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                  :current-page="this.pageParm.page"
+                  :page-size="10"
+                  layout="->,total, sizes, prev, pager, next, jumper"
+                  :page-sizes="[10, 20, 30, 50, 100, 200, 9999]"
+                  :total="this.pageParm.total"
+                >
+                </el-pagination>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      :visible.sync="dialogPrintVisible"
+      title="打印预览"
+      width="900px"
+    >
+      <div id="report" ref="report" class="report">
+        <table
+          border="1"
+          style="
+            table-layout: fixed;
+            width: 100%;
+            border: 1px solid #e2e6f0;
+            margin-bottom: 35px;
+          "
+        >
+          <thead>
+            <tr>
+              <th rowspan="1" :colspan="timeType === 'min' ? 4 : 2">能源报表</th>
+            </tr>
+            <tr>
+              <th align="center">时间</th>
+              <th v-if="timeType === 'min'" align="center">进SO2浓度(mg/m³)</th>
+              <th v-if="timeType === 'min'" align="center">出SO2浓度(mg/m³)</th>
+              <th align="center">小苏打用量(mg)</th>
+            </tr>
+          </thead>
+          <tr v-for="(item, index) in tableData" :key="index">
+            <td align="center" v-for="(value, key) in item" :key="key">
+              {{ value }}
+            </td>
+          </tr>
+        </table>
+        <div
+          class="detail"
+          style="
+            display: flex;
+            flex-direction: row;
+            font-size: 14px;
+            justify-content: space-between;
+            flex-wrap: nowrap;
+            width: 40%;
+            color: #ffffff;
+          "
+        >
+          <div>操作员: {{ this.userName }}</div>
+          <div class="print-date">日期： {{ this.operationDate }}</div>
+        </div>
+      </div>
+      <el-row type="flex" justify="end" style="margin-top: 0.2rem">
+        <el-col :span="2">
+          <el-button type="info" @click="dialogPrintVisible = false"
+            >取消</el-button
+          >
+        </el-col>
+        <el-col :span="2" style="margin-left: 60px">
+          <el-button type="success" @click="surePrint">确认</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { format2, getDay } from "@/utils/datetime";
+import { fgdScrEnergy } from "@/api/desulfurization/energyAnalysis";
+import { listData } from "@/api/system/dict/data";
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      listLoading: false,
+      dateType: "hour", //默认选择小时
+      timeType: "hour", //查询时设置的时间类型
+      timeDate: [], //小时值
+      dayDate: [], //日值
+      monthDate: [], //月值
+      startYear: "", //开始年份
+      endYear: "", //结束年份
+      startTime: "", //开始日期
+      endTime: "", //结束日期
+      // 图表数据
+      dateList: [],
+      coldData: [],
+      electData: [],
+      copData: [],
+      chartInstance2: null,
+      option2: {},
+      showZoom: true,
+      // 表格数据
+      tableData: [],
+      pageParm: {
+        page: 1, //开始页面页数，初始页
+        pageSize: 10, //每页的数据条数
+        total: null, //页数总数
+      },
+      dialogPrintVisible: false,
+      userName: "", //操作员
+      operationDate: getDay(0), //操作日期
+      titleDate: "",
+      systemType: "", //系统类型
+      systemTypes: [],
+    };
+  },
+  mounted() {
+    this.initializeTimeDate();
+    this.chartInstance2 = echarts.init(this.$refs.charts_refs);
+    this.screenAdapter();
+    window.addEventListener("resize", this.screenAdapter);
+    // this.getDictList();
+    this.getTableData();
+    this.getChartsData();
+    this.userName = sessionStorage.getItem("userName");
+  },
+  destroyed() {
+    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  methods: {
+    /** 查询系统类型-字典数据列表 */
+    getDictList() {
+      let data = {
+        pageNum: 1,
+        pageSize: 100,
+        dictType: "sys_type",
+      };
+      listData(data).then((response) => {
+        this.systemTypes = response.rows;
+        this.systemType = this.systemTypes[0].dictValue;
+        this.getTableData();
+        this.getChartsData();
+      });
+    },
+
+    //分页组件切换每页数量
+    handleSizeChange(val) {
+      this.pageParm.pageSize = val;
+      this.pageParm.page = 1;
+      // 更新表格
+      this.getTableData();
+    },
+    //分页组件转页
+    handleCurrentChange(val) {
+      this.pageParm.page = val;
+      // 更新表格
+      this.getTableData();
+    },
+    // 初始化时间
+    initializeTimeDate() {
+      const start = new Date(new Date().setHours(0, 0, 0, 0));
+      const end = new Date(new Date().setHours(23, 59, 59, 59));
+      this.timeDate = [format2(start), format2(end)]; // 更新
+      this.titleDate = format2(start) + "至" + format2(end);
+    },
+
+    // 选择时间类型
+    updateDateType() {
+      // this.dateType = this.radio;
+      console.log(this.dateType);
+      (this.timeDate = []), //小时值
+        (this.dayDate = []), //日值
+        (this.monthDate = []), //月值
+        (this.startYear = ""), //开始年份
+        (this.endYear = ""); //结束年份
+    },
+    // 选中日期事件
+    dateChange() {
+      // console.log("打印时间", this.timeform.time1);
+      if (!this.dayDate) {
+        this.$nextTick(() => {
+          this.dayDate = [];
+        });
+      }
+      if (!this.monthDate) {
+        this.$nextTick(() => {
+          this.monthDate = [];
+        });
+      }
+    },
+    // 查询
+    findData() {
+      this.pageParm.page = 1;
+      console.log("this.dateType", this.dateType);
+      console.log("this.timeDate", this.timeDate);
+      this.timeType = this.dateType;
+      switch (this.dateType) {
+        case "min":
+          if (!this.timeDate) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            this.titleDate =
+              format2(this.timeDate[0]) + "至" + format2(this.timeDate[1]);
+            this.getTableData();
+            this.getChartsData();
+          }
+          break;
+        case "hour":
+          if (!this.timeDate) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            this.titleDate =
+              format2(this.timeDate[0]) + "至" + format2(this.timeDate[1]);
+            this.getTableData();
+            this.getChartsData();
+          }
+          break;
+        case "day":
+          if (this.dayDate.length === 0) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            const newLength =
+              new Date(this.dayDate[1]).getTime() -
+              new Date(this.dayDate[0]).getTime();
+            const dayDiff = Math.floor(newLength / (1000 * 60 * 60 * 24));
+            if (dayDiff > 31) {
+              this.showMessage(
+                "最多只能选择30天区间，请重新选择再查询！",
+                "warning"
+              );
+            } else {
+              this.titleDate = this.dayDate[0] + "至" + this.dayDate[1];
+              this.getTableData();
+              this.getChartsData();
+            }
+          }
+          break;
+        case "month":
+          if (this.monthDate.length === 0) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            const [start, end] = this.monthDate;
+            const startDate = new Date(start);
+            const endDate = new Date(end);
+            const startYear = startDate.getFullYear();
+            const startMonth = startDate.getMonth();
+            const endYear = endDate.getFullYear();
+            const endMonth = endDate.getMonth();
+            const monthDiff =
+              (endYear - startYear) * 12 + (endMonth - startMonth);
+            if (monthDiff > 12) {
+              this.showMessage(
+                "最多只能选择12个月区间，请重新选择再查询！",
+                "warning"
+              );
+            } else {
+              this.titleDate = this.monthDate[0] + "至" + this.monthDate[1];
+              this.getTableData();
+              this.getChartsData();
+            }
+          }
+          break;
+        case "year":
+          if (!this.startYear || !this.endYear) {
+            this.showMessage("请选择全年份区间！", "warning");
+          } else if (this.startYear > this.endYear) {
+            this.showMessage("结束年份要大于开始年份！", "warning");
+          } else {
+            this.titleDate = this.startYear + "至" + this.endYear;
+            this.getTableData();
+            this.getChartsData();
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    // 显示消息的函数
+    showMessage(message, type) {
+      this.$message({
+        message: message,
+        type: type,
+      });
+    },
+    getTableData() {
+      if (this.timeType == "min" || this.timeType == "hour") {
+        this.startTime = format2(this.timeDate[0]);
+        this.endTime = format2(this.timeDate[1]);
+      } else if (this.timeType == "day") {
+        this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : "";
+        this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : "";
+      } else if (this.timeType == "month") {
+        this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : "";
+        this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : "";
+      } else if (this.timeType == "year") {
+        (this.startTime = this.startYear), (this.endTime = this.endYear);
+      }
+      
+      let data = {
+        timeType: this.timeType,
+        startTime: this.startTime,
+        endTime: this.endTime,
+        pageNum: this.pageParm.page,
+        pageSize: this.pageParm.pageSize,
+        systemType: "8",
+      };
+      console.log("查询数据参数", data);
+      this.listLoading = true;
+      fgdScrEnergy(data).then((res) => {
+        console.log("查询返回", res);
+        if (res.code == 200 && res.data) {
+          const dataMap = {};
+          res.data.forEach((item) => {
+            const key = Object.keys(item)[0];
+            dataMap[key] = item[key];
+          });
+          if (this.timeType === 'min') {
+            this.tableData = (dataMap.timeStrArr || []).map((date, index) => ({
+              date,
+              coldData: (dataMap.so1 && dataMap.so1[index]) ? dataMap.so1[index].toString() : "",
+              electData: (dataMap.so2 && dataMap.so2[index]) ? dataMap.so2[index].toString() : "",
+              copData: (dataMap.loadCell && dataMap.loadCell[index]) ? dataMap.loadCell[index].toString() : "",
+            }));
+          } else {
+            this.tableData = (dataMap.timeStrArr || []).map((date, index) => ({
+              date,
+              copData: (dataMap.loadCell && dataMap.loadCell[index]) ? dataMap.loadCell[index].toString() : "",
+            }));
+          }
+          this.pageParm.total = dataMap.total || 0;
+        } else {
+          this.tableData = [];
+        }
+      });
+      setTimeout(() => {
+        this.listLoading = false;
+      }, 1.0 * 1000);
+    },
+    getChartsData() {
+      if (this.timeType == "min" || this.timeType == "hour") {
+        this.startTime = format2(this.timeDate[0]);
+        this.endTime = format2(this.timeDate[1]);
+      } else if (this.timeType == "day") {
+        this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : "";
+        this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : "";
+      } else if (this.timeType == "month") {
+        this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : "";
+        this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : "";
+      } else if (this.timeType == "year") {
+        (this.startTime = this.startYear), (this.endTime = this.endYear);
+      }
+      
+      let data = {
+        timeType: this.timeType,
+        startTime: this.startTime,
+        endTime: this.endTime,
+        pageNum: 0,
+        pageSize: 10,
+        systemType: "8",
+      };
+      console.log("查询数据参数", data);
+      fgdScrEnergy(data).then((res) => {
+        console.log("查询返回", res);
+        if (res.code == 200 && res.data) {
+          const dataMap = {};
+          res.data.forEach((item) => {
+            const key = Object.keys(item)[0];
+            dataMap[key] = item[key];
+          });
+          this.dateList = dataMap.timeStrArr || [];
+          this.coldData = dataMap.so1 || [];
+          this.electData = dataMap.so2 || [];
+          this.copData = dataMap.loadCell || [];
+          
+          // 分钟
+          if (this.timeType === 'min') {
+            let copNumbers = this.copData.map((value) => parseFloat(value));
+            var Min2 = 0,
+              Max2 = Math.ceil(Math.max(...copNumbers));
+            
+            let coldNumbers = this.coldData.map((value) => parseFloat(value));
+            let electNumbers = this.electData.map((value) => parseFloat(value));
+            var Min1 = 0,
+              Max1 = Math.ceil(Math.max(...coldNumbers, ...electNumbers));
+            
+            const adapterOption = {
+              tooltip: {
+                trigger: "axis",
+                formatter: function (params) {
+                  let res = '<div style="color:#000000;font-weight:bold;margin-bottom:5px">' + params[0].name + "</div>";
+                  params.forEach((item) => {
+                    const marker = item.marker;
+                    const seriesName = item.seriesName;
+                    const value = item.value;
+                    if (seriesName === "进SO2浓度" || seriesName === "出SO2浓度") {
+                      res +=
+                        marker +
+                        seriesName +
+                        ":" +
+                        '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                        value +
+                        " mg/m³" +
+                        "</span><br>";
+                    } else if (seriesName === "小苏打用量") {
+                      res +=
+                        marker +
+                        seriesName +
+                        ":" +
+                        '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                        value +
+                        " mg" +
+                        "</span><br>";
+                    } else {
+                      res +=
+                        marker +
+                        seriesName +
+                        ":" +
+                        '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                        value +
+                        "</span><br>";
+                    }
+                  });
+                  return res;
+                },
+              },
+              legend: {
+                data: ["小苏打用量", "进SO2浓度", "出SO2浓度"],
+                show: true,
+                textStyle: {
+                  color: "white",
+                },
+              },
+              grid: {
+                top: "10%",
+                left: "3%",
+                right: "4.4%",
+                bottom: "20%",
+                containLabel: true,
+              },
+              xAxis: {
+                type: "category",
+                boundaryGap: true,
+                axisLabel: {
+                  color: "rgba(255, 255, 255, 1)",
+                },
+                axisTick: {
+                  show: false,
+                },
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: "#365576",
+                  },
+                },
+                splitLine: {
+                  lineStyle: {
+                    color: "#e2e6f0",
+                  },
+                },
+                data: this.dateList,
+              },
+              yAxis: [
+                {
+                  type: "value",
+                  name: "小苏打用量(mg)",
+                  nameTextStyle: {
+                    color: "rgba(255, 255, 255, 1)",
+                    fontSize: 12,
+                  },
+                  axisLabel: {
+                    color: "rgba(255, 255, 255, 1)",
+                  },
+                  axisLine: {
+                    show: true,
+                    lineStyle: {
+                      color: "#365576",
+                    },
+                  },
+                  splitLine: {
+                    lineStyle: {
+                      color: "#1a3d62",
+                      type: "dashed",
+                    },
+                  },
+                  min: Min2,
+                  max: Max2,
+                  splitNumber: 10,
+                  interval: (Max2 - Min2) / 10,
+                  scale: true,
+                },
+                {
+                  type: "value",
+                  name: "SO2浓度(mg/m³)",
+                  nameTextStyle: {
+                    color: "rgba(255, 255, 255, 1)",
+                    fontSize: 12,
+                  },
+                  axisLabel: {
+                    color: "rgba(255, 255, 255, 1)",
+                  },
+                  axisLine: {
+                    show: true,
+                    lineStyle: {
+                      color: "#365576",
+                    },
+                  },
+                  splitLine: {
+                    lineStyle: {
+                      color: "#1a3d62",
+                      type: "dashed",
+                    },
+                  },
+                  min: Min1,
+                  max: Max1,
+                  splitNumber: 10,
+                  interval: (Max1 - Min1) / 10,
+                  scale: true,
+                },
+              ],
+              dataZoom: [
+                {
+                  type: "slider",
+                  height: 15,
+                  xAxisIndex: 0,
+                  start: 0,
+                  end: 100,
+                  handleSize: "120%",
+                  filterMode: "filter",
+                },
+                {
+                  type: "slider",
+                  width: 15,
+                  handleSize: "120%",
+                  yAxisIndex: [0, 1],
+                  filterMode: "filter",
+                  start: 0,
+                  end: 100,
+                },
+              ],
+              series: [
+                {
+                  name: "小苏打用量",
+                  type: "bar",
+                  yAxisIndex: 0,
+                  smooth: true,
+                  symbol: "circle",
+                  symbolSize: 8,
+                  showSymbol: false,
+                  itemStyle: {
+                    color: "#b1433b",
+                  },
+                  data: this.copData,
+                  sampling: "lttb",
+                },
+                {
+                  name: "进SO2浓度",
+                  type: "line",
+                  yAxisIndex: 1,
+                  smooth: true,
+                  symbol: "circle",
+                  symbolSize: 8,
+                  showSymbol: false,
+                  itemStyle: {
+                    color: "rgba(1, 102, 251, 1)",
+                  },
+                  data: this.coldData,
+                  sampling: "lttb",
+                },
+                {
+                  name: "出SO2浓度",
+                  type: "line",
+                  yAxisIndex: 1,
+                  smooth: true,
+                  symbol: "circle",
+                  symbolSize: 8,
+                  showSymbol: false,
+                  itemStyle: {
+                    color: "rgba(0, 224, 225, 1)",
+                  },
+                  data: this.electData,
+                  sampling: "lttb",
+                },
+              ],
+            };
+            this.chartInstance2.setOption(adapterOption, true);
+          } else {
+            // 非分钟
+            let copNumbers = this.copData.map((value) => parseFloat(value));
+            var Min = 0,
+              Max = Math.ceil(Math.max(...copNumbers));
+            
+            const adapterOption = {
+              tooltip: {
+                trigger: "axis",
+                formatter: function (params) {
+                  let res = '<div style="color:#000000;font-weight:bold;margin-bottom:5px">' + params[0].name + "</div>";
+                  params.forEach((item) => {
+                    const marker = item.marker;
+                    const seriesName = item.seriesName;
+                    const value = item.value;
+                    if (seriesName === "小苏打用量") {
+                      res +=
+                        marker +
+                        seriesName +
+                        ":" +
+                        '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                        value +
+                        " mg" +
+                        "</span><br>";
+                    } else {
+                      res +=
+                        marker +
+                        seriesName +
+                        ":" +
+                        '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                        value +
+                        "</span><br>";
+                    }
+                  });
+                  return res;
+                },
+              },
+              legend: {
+                data: ["小苏打用量"],
+                show: true,
+                textStyle: {
+                  color: "white",
+                },
+              },
+              grid: {
+                top: "10%",
+                left: "3%",
+                right: "4.4%",
+                bottom: "20%",
+                containLabel: true,
+              },
+              xAxis: {
+                type: "category",
+                boundaryGap: true,
+                axisLabel: {
+                  color: "rgba(255, 255, 255, 1)",
+                },
+                axisTick: {
+                  show: false,
+                },
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: "#365576",
+                  },
+                },
+                splitLine: {
+                  lineStyle: {
+                    color: "#e2e6f0",
+                  },
+                },
+                data: this.dateList,
+              },
+              yAxis: {
+                type: "value",
+                name: "小苏打用量(mg)",
+                nameTextStyle: {
+                  color: "rgba(255, 255, 255, 1)",
+                  fontSize: 12,
+                },
+                axisLabel: {
+                  color: "rgba(255, 255, 255, 1)",
+                },
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: "#365576",
+                  },
+                },
+                splitLine: {
+                  lineStyle: {
+                    color: "#1a3d62",
+                    type: "dashed",
+                  },
+                },
+                min: Min,
+                max: Max,
+                splitNumber: 10,
+                interval: (Max - Min) / 10,
+                scale: true,
+              },
+              dataZoom: [
+                {
+                  type: "slider",
+                  height: 15,
+                  xAxisIndex: 0,
+                  start: 0,
+                  end: 100,
+                  handleSize: "120%",
+                  filterMode: "filter",
+                },
+                {
+                  type: "slider",
+                  width: 15,
+                  handleSize: "120%",
+                  yAxisIndex: 0,
+                  filterMode: "filter",
+                  start: 0,
+                  end: 100,
+                },
+              ],
+              series: [
+                {
+                  name: "小苏打用量",
+                  type: "bar",
+                  smooth: true,
+                  symbol: "circle",
+                  symbolSize: 8,
+                  showSymbol: false,
+                  itemStyle: {
+                    color: "#b1433b",
+                  },
+                  data: this.copData,
+                  sampling: "lttb",
+                },
+              ],
+            };
+            this.chartInstance2.setOption(adapterOption, true);
+          }
+          this.chartInstance2.resize();
+        } else {
+          this.dateList = [];
+          this.coldData = [];
+          this.electData = [];
+          this.copData = [];
+          this.option2.series[0].data = [];
+          this.option2.series[1].data = [];
+          this.option2.series[2].data = [];
+          this.option2.xAxis.data = [];
+          this.chartInstance2.setOption(this.option2);
+        }
+      });
+    },
+    //初始化chartInstance2对象 折线图
+    
+    // 元素大小
+    screenAdapter() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = this.$refs.charts_refs.offsetWidth / 130;
+      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+      const adapterOption = {
+        // x轴坐标字体大小
+        xAxis: {
+          axisLabel: {
+            fontSize: titleFontSize * 1.5,
+          },
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: titleFontSize * 1.5,
+          },
+        },
+      };
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance2.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance2.resize();
+    },
+    // 导出
+    exportData() {
+      if (this.timeType == "hour") {
+        this.startTime = format2(this.timeDate[0]);
+        this.endTime = format2(this.timeDate[1]);
+      } else if (this.timeType== "day") {
+        this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : "";
+        this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : "";
+      } else if (this.timeType == "month") {
+        this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : "";
+        this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : "";
+      } else if (this.timeType == "year") {
+        (this.startTime = this.startYear), (this.endTime = this.endYear);
+      }
+      let data = {
+        timeType: this.timeType,
+        startTime: this.startTime,
+        endTime: this.endTime,
+        pageNum: 0,
+        pageSize: 10,
+        systemType: "0",
+      };
+      console.log("导出数据参数", data);
+      exportData(data).then((res) => {
+        console.log("导出返回", res);
+        if (res) {
+          // 请求的结果就是文件
+          // 创建一个blob URL，用于生成下载链接
+          const url = window.URL.createObjectURL(new Blob([res]));
+          // 创建一个<a>元素，并设置其href和download属性
+          const link = document.createElement("a");
+          link.href = url;
+          link.setAttribute("download", "能源查询报表.xls"); // 设置下载的文件名
+          // 模拟点击下载链接
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          // 释放blob URL资源
+          window.URL.revokeObjectURL(url);
+          this.$message({
+            type: "success",
+            message: "导出成功!",
+          });
+        } else {
+          this.$message.error("导出失败!");
+        }
+      });
+      // .catch((err) => {
+      //     this.$message.error('导出失败!');
+      // })
+    },
+    // 打印
+    leadingPrint() {
+      this.dialogPrintVisible = true;
+    },
+    // 打印
+    surePrint() {
+      const printHTML = document.querySelector("#report").innerHTML;
+      // 将打印的区域赋值，进行打印
+      window.document.body.innerHTML = printHTML;
+      window.print(); // 调用window打印方法
+      window.location.reload(); // 打印完成后重新加载页面
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.condition {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 0.24rem;
+
+  .condition-left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .years-div {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .years-word {
+        font-size: 14px;
+        margin: 0 5px;
+        color: #388ff3;
+      }
+    }
+
+    .time-label {
+      font-size: 16px;
+      line-height: 7px;
+      margin-right: 12px;
+      white-space: nowrap;
+    }
+  }
+}
+.charts-table {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.charts-title {
+  font-size: 0.24rem;
+  line-height: 0.07rem;
+  letter-spacing: 0.02rem;
+  color: #1f70e9;
+  margin: 0.3rem 0;
+  width: 100%;
+  text-align: center;
+}
+.main-content {
+  min-height: 6.6rem;
+}
+
+.connect-div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 16rem;
+}
+.page {
+  margin-top: 0.22rem;
+}
+
+.charts_refs {
+  width: 16rem;
+  height: 4.55rem;
+  /* margin-bottom: 0.39rem; */
+  margin-left: -0.35rem;
+}
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .condition {
+    .condition-left {
+      .years-div {
+        .years-word {
+          font-size: 0.14rem !important;
+          margin: 0 0.05rem !important;
+        }
+      }
+
+      .time-label {
+        font-size: 0.16rem !important;
+        line-height: 0.07rem !important;
+        margin-right: 0.12rem !important;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index 8832686..8b48b79 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -5,42 +5,25 @@
         <div class="special-title">项目简介</div>
       </div>
       <div class="project-all">
-        <img
-          class="project-img"
-          :src="imgUrl + projectObj.logo"
-          @click="showDialog"
-          alt="Base64 Image"
-        />
+        <img class="project-img" :src="imgUrl + projectObj.logo" @click="showDialog" alt="Base64 Image" />
         <div class="project-li">
           <div class="list-con">
             <div class="project-left">
-              <img
-                class="left-icon"
-                src="../assets/images/project-icon1.png"
-                alt=""
-              />
+              <img class="left-icon" src="../assets/images/project-icon1.png" alt="" />
               <div class="project-name">项目名称</div>
             </div>
             <div class="project-right">{{ projectObj.proName }}</div>
           </div>
           <div class="list-con">
             <div class="project-left">
-              <img
-                class="left-icon"
-                src="../assets/images/project-icon2.png"
-                alt=""
-              />
+              <img class="left-icon" src="../assets/images/project-icon2.png" alt="" />
               <div class="project-name">建筑面积</div>
             </div>
             <div class="project-right">{{ projectObj.buildingArea }}m³</div>
           </div>
           <div class="list-con">
             <div class="project-left">
-              <img
-                class="left-icon"
-                src="../assets/images/project-icon3.png"
-                alt=""
-              />
+              <img class="left-icon" src="../assets/images/project-icon3.png" alt="" />
               <div class="project-name">运营地址</div>
             </div>
             <div class="project-right">{{ projectObj.proAddr }}</div>
@@ -49,11 +32,7 @@
         <div class="project-li">
           <div class="list-con">
             <div class="project-left">
-              <img
-                class="left-icon"
-                src="../assets/images/project-icon3.png"
-                alt=""
-              />
+              <img class="left-icon" src="../assets/images/project-icon3.png" alt="" />
               <div class="project-name">项目运行开始时间</div>
             </div>
             <div class="project-right">{{ projectObj.operateStartTime }}</div>
@@ -61,68 +40,43 @@
         </div>
       </div>
     </div>
-    <div class="project-data">
-      <div class="special-div" style="width: 60%">
-        <div class="special-top">
-          <div class="special-title">项目概况</div>
-        </div>
-        <div class="overview">
-          <div class="overview-li" @click="goEnergy">
-            <div>总耗电量(kwh)</div>
-            <div class="overview-details">{{ projectView.totalEle }}</div>
-          </div>
-          <div class="overview-li" @click="goEnergy">
-            <div>总热水补水(吨)</div>
-            <div class="overview-details">
-              {{ projectView.totalWater }}
-            </div>
-          </div>
-          <div class="overview-li" @click="goEnergy">
-            <div>总蒸汽流量(吨)</div>
-            <div class="overview-details">
-              {{ projectView.totalGas }}
-            </div>
-          </div>
-          <div class="overview-li" @click="goEnergy">
-            <div>总产冷量(kw)</div>
-            <div class="overview-details">
-              {{ projectView.totalCold }}
-            </div>
-          </div>
-          <div class="overview-li" @click="goEnergy">
-            <div>今年耗电量(kwh)</div>
-            <div class="overview-details">
-              {{ projectView.yearEle }}
-            </div>
-          </div>
-          <div class="overview-li" @click="goEnergy">
-            <div>今年热水补水(吨)</div>
-            <div class="overview-details">
-              {{ projectView.yearWater }}
+    <div class=" special-div" style="width: 100%">
+      <div class="special-top">
+        <div class="special-title">脱硫系统</div>
+      </div>
+      <div class="project-data">
+        <div class="project-data-left">
+          <div class="overview">
+            <div class="overview-item" >
+              <div class="overview-label">反应前SO2浓度</div>
+              <div class="overview-unit">(mg/m³)</div>
+              <div class="overview-details">{{ projectView.beforeSO2 }}</div>
             </div>
-          </div>
-          <div class="overview-li" @click="goEnergy">
-            <div>今年蒸汽流量(吨)</div>
-            <div class="overview-details">
-              {{ projectView.yearGas }}
+            <div class="overview-divider"></div>
+            <div class="overview-item">
+              <div class="overview-label">反应后SO2浓度</div>
+              <div class="overview-unit">(mg/m³)</div>
+              <div class="overview-details">
+                {{ projectView.afterSO2 }}
+              </div>
             </div>
           </div>
-          <div class="overview-li" @click="goEnergy">
-            <div>今年产冷量(kw)</div>
-            <div class="overview-details">
-              {{ projectView.yearCold }}
-            </div>
+        </div>
+        <div class="project-data-right">
+          <div class="tight-title">
+            最近30日小苏打日用量
           </div>
+          <soda-daily-dosage></soda-daily-dosage>
         </div>
       </div>
-      <div class="special-div" style="width: 39%">
-        <div class="special-top">
-          <div class="special-title">冷源系统</div>
+      <div class="project-data-right density">
+        <div class="tight-title">
+          SO2最近24小时浓度与小苏打用量
         </div>
-        <view-energy></view-energy>
+        <density-and-dasage></density-and-dasage>
       </div>
     </div>
-    <div class="project-bie">
+    <!-- <div class="project-bie">
       <div class="special-div">
         <div class="special-top">
           <div class="special-title">冷源能耗</div>
@@ -147,28 +101,13 @@
         </div>
         <tem-meter :subData="temSys"></tem-meter>
       </div>
-    </div>
-    <el-dialog
-      :visible.sync="dialogVisible"
-      title="上传图片"
-      width="500px"
-      @close="addExpenseClose"
-    >
+    </div> -->
+    <el-dialog :visible.sync="dialogVisible" title="上传图片" width="500px" @close="addExpenseClose">
       <!-- 使用 el-upload 组件 -->
-      <el-upload
-        class="upload-demo"
-        ref="uploadComponent"
-        action="#"
-        list-type="picture-card"
-        :on-preview="handlePictureCardPreview"
-        :on-remove="handleRemove"
-        :before-upload="beforeUpload"
-        :limit="1"
-        :on-exceed="handleExceed"
-        :on-change="handleFileChange"
-        accept="image/png, image/jpeg"
-        :http-request="customHttpRequest"
-      >
+      <el-upload class="upload-demo" ref="uploadComponent" action="#" list-type="picture-card"
+        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="beforeUpload" :limit="1"
+        :on-exceed="handleExceed" :on-change="handleFileChange" accept="image/png, image/jpeg"
+        :http-request="customHttpRequest">
         <i class="el-icon-plus"></i>
       </el-upload>
       <div slot="footer" class="dialog-footer">
@@ -190,19 +129,15 @@ import {
   viewProfile,
   viewMainParams,
 } from "@/api/index";
-import viewEnergy from "./components/viewEnergy.vue";
-import ViewColdSys from "./components/viewColdSys.vue";
-import HotWater from "./components/hotWater.vue";
-import AircAndWindcMeter from "./components/aircAndWindcMeter.vue";
-import TemMeter from "./components/temMeter.vue";
+
+import SodaDailyDosage from "./components/sodaDailyDosage.vue";
+import DensityAndDasage from "./components/densityAndDasage.vue";
 
 export default {
   components: {
-    viewEnergy,
-    ViewColdSys,
-    HotWater,
-    AircAndWindcMeter,
-    TemMeter,
+
+    SodaDailyDosage,
+    DensityAndDasage
   },
   data() {
     return {
@@ -215,14 +150,8 @@ export default {
         operateStartTime: "",
       },
       projectView: {
-        totalEle: "",
-        totalWater: "",
-        totalGas: "",
-        totalCold: "",
-        yearEle: "",
-        yearWater: "",
-        yearGas: "",
-        yearCold: "",
+        beforeSO2: "",
+        afterSO2: "",
       },
       dialogVisible: false,
       selectedFile: null,
@@ -245,7 +174,6 @@ export default {
   },
   mounted() {
     this.getProject();
-    this.getHomeData();
     this.getSubData();
     // // 在组件挂载后尝试进入全屏
     // setTimeout(() => {
@@ -320,7 +248,7 @@ export default {
       this.viewImageUrl = file.url;
     },
     // 上传成功
-    handleUploadSuccess(response, file, fileList) {},
+    handleUploadSuccess(response, file, fileList) { },
     // 处理文件
     handleFileChange(file, fileList) {
       console.log("file", file);
@@ -373,15 +301,7 @@ export default {
         }
       });
     },
-    // 项目概况
-    getHomeData() {
-      viewProfile().then((res) => {
-        if (res.code == 200) {
-          this.projectView = res.rows[0];
-        }
-      });
-    },
-    goEnergy(){
+    goEnergy() {
       this.$router.push("/comprehensiveEnergy/systemEnergy")
     },
     //初始化chartInstance对象
@@ -614,27 +534,20 @@ export default {
     getSubData() {
       viewMainParams().then((res) => {
         console.log("系统参数返回", res);
-        console.log("冷源监控返回", res.rows[0]);
-        this.coldSys = [];
-        this.hotWaterSys = [];
-        this.airAndWindSys = [];
-        this.temSys = [];
         if (res.code == 200 && res.rows) {
-          res.rows.forEach((val) => {
-            if (val.name.includes("冷源")) {
-              this.coldSys = val.values;
-              console.log("this.coldSys111111111111", this.coldSys);
-            }
-            if (val.name.includes("热水")) {
-              this.hotWaterSys = val.values;
-            }
-            if (val.name.includes("风柜")) {
-              this.airAndWindSys = val.values;
-            }
-            if (val.name.includes("温度")) {
-              this.temSys = val.values;
-            }
-          });
+          console.log("rows数组:", res.rows);
+          const desulfurSystem = res.rows.find(item => item.name === "脱硫系统");
+          if (desulfurSystem && desulfurSystem.values) {
+            const beforeSO2 = desulfurSystem.values.find(v => v.name === "反应前SO2浓度");
+            const afterSO2 = desulfurSystem.values.find(v => v.name === "反应后SO2浓度");
+            console.log("反应前SO2:", beforeSO2);
+            console.log("反应后SO2:", afterSO2);
+            this.projectView = {
+              beforeSO2: beforeSO2 ? beforeSO2.value : "",
+              afterSO2: afterSO2 ? afterSO2.value : ""
+            };
+            console.log("最终projectView:", this.projectView);
+          }
         }
       });
     },
@@ -649,6 +562,7 @@ export default {
   flex-direction: row;
   align-items: flex-start;
   padding: 0.35rem;
+
   .project-img {
     width: 1.4rem;
     height: 1.4rem;
@@ -657,24 +571,29 @@ export default {
     margin-right: 0.4rem;
     cursor: pointer;
   }
+
   .project-li {
     width: calc((100% - 0.7rem) / 2);
     display: flex;
     flex-direction: column;
+
     .list-con {
       width: 100%;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
+
       .project-left {
         display: flex;
         flex-direction: row;
         align-items: center;
+
         .left-icon {
           width: 0.2rem;
           height: 0.2rem;
         }
+
         .project-name {
           font-family: SourceHanSansCN-Regular;
           font-size: 0.18rem;
@@ -684,6 +603,7 @@ export default {
           margin-left: 0.15rem;
         }
       }
+
       .project-right {
         font-family: SourceHanSansCN-Regular;
         font-size: 0.18rem;
@@ -692,82 +612,182 @@ export default {
       }
     }
   }
+
   .project-li:nth-last-child(1) {
     margin-left: 1.5rem;
   }
 }
-.project-data {
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  justify-content: space-between;
+
+.special-div {
   margin: 16px 0;
-  .overview {
+
+  .project-data {
     width: 100%;
-    padding-top: 0.32rem;
     display: flex;
     flex-direction: row;
-    align-items: center;
-    flex-wrap: wrap;
-    .overview-li {
-      cursor: pointer;
-      width: calc(25%);
-      height: 1.65rem;
+    align-items: stretch;
+    justify-content: space-between;
+    gap: 0.2rem;
+    padding: 0.2rem;
+    min-height: 4rem;
+
+    .project-data-left {
+      width: 30%;
+      flex-shrink: 0;
       display: flex;
       flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      background-image: url(../assets/images/overview-img.png);
-      background-repeat: no-repeat;
-      background-size: 1.65rem 1.65rem;
-      background-position: center center;
-      margin-bottom: 0.3rem;
-      font-family: SourceHanSansCN-Regular;
-      font-size: 0.15rem;
-      color: #ffffff;
-      .overview-details {
-        font-family: DIN-Bold;
-        font-size: 0.2rem;
-        color: #15e1fd;
-        margin-top: 0.05rem;
+
+      .overview {
+        flex: 1;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+
+        .overview-item {
+          cursor: pointer;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 0.25rem 0;
+          background: rgba(21, 225, 253, 0.08);
+          border-radius: 0.12rem;
+          box-shadow: 0 0 20px rgba(11, 136, 185, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+
+          .overview-label {
+            font-family: SourceHanSansCN-Regular;
+            font-size: 0.16rem;
+            color: rgba(255, 255, 255, 1);
+            letter-spacing: 0.02rem;
+          }
+
+          .overview-unit {
+            font-family: SourceHanSansCN-Regular;
+            font-size: 0.14rem;
+            color: rgba(255, 255, 255, 0.6);
+            margin-top: 0.03rem;
+          }
+
+          .overview-details {
+            font-family: DIN-Bold;
+            font-size: 0.28rem;
+            color: #15e1fd;
+            margin-top: 0.1rem;
+            text-shadow: 0 0 15px rgba(21, 225, 253, 0.5);
+            letter-spacing: 0.01rem;
+          }
+        }
+
+        .overview-divider {
+          height: 1px;
+          margin: 0.1rem 0.2rem;
+          background: linear-gradient(90deg, transparent 0%, rgba(21, 225, 253, 0.3) 50%, transparent 100%);
+        }
+      }
+    }
+  }
+
+  .project-data-right {
+    width: 69%;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+     background: rgba(21, 225, 253, 0.08);
+    border-radius: 0.12rem;
+    box-shadow: 0 0 20px rgba(11, 136, 185, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    padding: 0 0 20px 0;
+
+    .tight-title {
+      font-family: SourceHanSansCN-Bold;
+      font-size: 20px;
+      color: #e9ecea;
+      font-weight: 700;
+      padding:15px 15px 15px 35px;
+      margin: 0;
+      position: relative;
+      text-shadow: 0 0 15px rgba(21, 225, 253, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
+      letter-spacing: 0.03rem;
+      background: rgba(32, 185, 245, 0.1);
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 15px;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: rgb(8, 238, 207);
+        box-shadow: 0 0 10px rgba(8, 238, 207, 0.8);
+        transform: translateY(-50%);
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: linear-gradient(90deg, transparent 0%, rgba(15, 253, 233, 0.4) 50%, transparent 100%);
       }
     }
+
+    > :not(.tight-title) {
+      flex: 1;
+      min-height: 0;
+    }
+  }
+
+  .density {
+    width: calc(100% - 0.4rem);
+    margin: 0 0.2rem 0.2rem 0.2rem;
   }
 }
+
 .chartsDiv {
   width: 100%;
   height: 4rem;
 }
+
 .project-bie {
   width: 100%;
   display: flex;
   flex-direction: row;
   align-items: stretch;
   justify-content: space-between;
+
   .special-div {
     width: 24.5%;
   }
 }
+
 @media (max-width: 1485px) {
   .overview-li {
-    width: calc(33.33%) !important;
+    width: calc(50%) !important;
     height: 2.5rem !important;
     background-size: 2.5rem 2.5rem !important;
     margin-bottom: 0.3rem;
     font-size: 0.22rem !important;
+
     .overview-details {
       font-size: 0.27rem !important;
     }
   }
+
   .project-bie {
     flex-wrap: wrap !important;
+
     .special-div {
       width: 49.5% !important;
       margin-bottom: 0.25rem;
     }
   }
 }
+
 // 媒体查询，适配大于2000px分辨率的大屏样式
-@media (min-width: 2000px) {
-}
+@media (min-width: 2000px) {}
 </style>