diff --git a/src/App.vue b/src/App.vue
index 4bdbe94..559a9dc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,7 @@
   /* width: 100vw;
   height: 100vh; */
   overflow: hidden;
-  background-color: transparent;
+  background: transparent;
   background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
     url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
 }
diff --git a/src/assets/znyw/tpt.png b/src/assets/znyw/tpt.png
new file mode 100644
index 0000000..a708bdc
Binary files /dev/null and b/src/assets/znyw/tpt.png differ
diff --git a/src/router/index.js b/src/router/index.js
index eb3e63c..d491c45 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,6 +19,11 @@ const routes = [
         name: "pds",
         component: () => import("../views/lll/PDS.vue"),
       },
+      {
+        path: "/nyjcd",
+        name: "nyjcd",
+        component: () => import("../views/lll/NYJCD.vue"),
+      },
     ],
   },
 ];
diff --git a/src/views/Index.vue b/src/views/Index.vue
index ada37c5..b278ef5 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -87,6 +87,7 @@ export default {
 .content {
   width: 100%;
   height: 100%;
+  background-color: transparent;
   background: url(../assets/img/标题.png);
   background-size: cover;
   .box {
diff --git a/src/views/lll/NYJCD.vue b/src/views/lll/NYJCD.vue
new file mode 100644
index 0000000..595198f
--- /dev/null
+++ b/src/views/lll/NYJCD.vue
@@ -0,0 +1,390 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img src="../../assets/img/标题/能源监测-电.png" class="title" />
+      <div class="qcssdh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>全厂实时电荷</p>
+        </div>
+        <div class="data">
+          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+            >年</span
+          >
+          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+            >月</span
+          >
+          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
+            >日</span
+          >
+        </div>
+        <div id="qcssdh"></div>
+      </div>
+      <div class="qcydl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>全厂用电量</p>
+        </div>
+        <div class="chartBox">
+          <div class="chartbox" v-for="item in list">
+            <span>{{ item.name }}</span>
+            <div class="bigBox">
+              <div
+                class="smallBox"
+                :style="{ width: `${35 * item.value}px` }"
+              ></div>
+            </div>
+            <span>{{ item.value }}kWh</span>
+          </div>
+        </div>
+      </div>
+      <div class="zjtpt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>总降拓扑图</p>
+        </div>
+        <div class="imgBox1">
+          <img src="../../assets/znyw/tpt.png" />
+        </div>
+      </div>
+    </div>
+
+    <div class="right">
+      <div class="yrfd">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>余热发电</p>
+        </div>
+        <div class="chartBox"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      res: "月",
+      option1: {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [200, 300, 500, 400, 334],
+            itemStyle: {
+              normal: {
+                color: "#00FF00",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21FF55", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        legend: {
+          data: ["余热发电量"],
+        },
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "bar",
+            name: "余热发电量",
+            data: [523, 410, 300, 300, 250],
+            itemStyle: {
+              normal: {
+                color: "#00FF00",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21FF55", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "6.21",
+        },
+        {
+          name: "3号生产线",
+          value: "6.21",
+        },
+        {
+          name: "生活办公区",
+          value: "6.52",
+        },
+      ],
+    };
+  },
+
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("qcssdh", this.option1);
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 500px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+}
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .qcssdh {
+    position: relative;
+    margin-top: 56px;
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+    #qcssdh {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+  .qcydl {
+    position: relative;
+    margin-top: 56px;
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+        .bigBox {
+          width: 661px;
+          height: 65px;
+          background-color: #273546;
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+        span:nth-of-type(2) {
+          color: #10ff3c;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+  .zjtpt {
+    position: relative;
+    margin-top: 56px;
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+    .imgBox1 {
+      margin-top: 50px;
+      width: 1156px;
+      height: 500px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .yrfd {
+    position: relative;
+    margin-top: 130px;
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+    .chartBox {
+      margin-top: 50px;
+    }
+  }
+}
+</style>
diff --git a/src/views/lll/ZNYW.vue b/src/views/lll/ZNYW.vue
index 8d52050..cc54f3a 100644
--- a/src/views/lll/ZNYW.vue
+++ b/src/views/lll/ZNYW.vue
@@ -568,7 +568,12 @@ export default {
           display: flex;
           margin: 20px;
           justify-content: space-between;
-          background: linear-gradient(#38b7a1 20%, #38b7a1 0%);
+          background: linear-gradient(
+            90deg,
+            rgba(56, 183, 161, 0.3) 30%,
+            rgba(79, 180, 163, 0.3) 30%,
+            rgba(81, 147, 136, 0.3) 40%
+          );
           border-left: 5px solid #28a896;
           padding-left: 16px;
           padding-right: 16px;