From 5317c873041a994c4da5089b8b16f7a24f670bb4 Mon Sep 17 00:00:00 2001
From: lll <you@example.com>
Date: Thu, 23 Nov 2023 14:56:43 +0800
Subject: [PATCH] nyjc

---
 src/router/index.js     |  17 +-
 src/views/lll/NYJC.vue  | 868 ++++++++++++++++++++++++++++++++++++++++
 src/views/lll/NYJCD.vue |   2 +-
 src/views/lll/PDS.vue   |   2 +-
 src/views/lll/ZNYW.vue  |   2 +-
 5 files changed, 882 insertions(+), 9 deletions(-)
 create mode 100644 src/views/lll/NYJC.vue

diff --git a/src/router/index.js b/src/router/index.js
index bec0eb0..6ca6aeb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,14 +15,14 @@ const routes = [
         component: () => import("../views/lll/ZNYW.vue"),
       },
       {
-        path:"/fhgl",
-        name:"fhgl",
-        component:()=>import("@/views/Zhou/FHGL.vue")
+        path: "/fhgl",
+        name: "fhgl",
+        component: () => import("@/views/Zhou/FHGL.vue"),
       },
       {
-        path:"/kdfh",
-        name:"kdfh",
-        component:()=>import("@/views/Zhou/KDFH.vue")
+        path: "/kdfh",
+        name: "kdfh",
+        component: () => import("@/views/Zhou/KDFH.vue"),
       },
       {
         path: "/pds",
@@ -34,6 +34,11 @@ const routes = [
         name: "nyjcd",
         component: () => import("../views/lll/NYJCD.vue"),
       },
+      {
+        path: "/nyjc",
+        name: "nyjc",
+        component: () => import("../views/lll/NYJC.vue"),
+      },
     ],
   },
 ];
diff --git a/src/views/lll/NYJC.vue b/src/views/lll/NYJC.vue
new file mode 100644
index 0000000..f8fc77d
--- /dev/null
+++ b/src/views/lll/NYJC.vue
@@ -0,0 +1,868 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img src="../../assets/img/标题/能源监测.png" class="title" />
+      <div class="qcydl">
+        <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 class="tip">
+          <span>今日用电量</span><span>870</span><span>kWh</span><span>↑</span>
+        </div>
+        <div id="qcydl"></div>
+      </div>
+      <div class="qcysl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>全厂用水量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+          <span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
+            >日</span
+          >
+        </div>
+        <div class="tip">
+          <span>今日用水量</span><span>870</span><span>t</span><span>↑</span>
+        </div>
+        <div id="qcysl"></div>
+      </div>
+      <div class="qcyml">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>全厂用煤量</p>
+        </div>
+        <div class="data">
+          <span :class="res2 == '年' ? 'active' : ''" @click="res2 = '年'"
+            >年</span
+          >
+          <span :class="res2 == '月' ? 'active' : ''" @click="res2 = '月'"
+            >月</span
+          >
+          <span :class="res2 == '日' ? 'active' : ''" @click="res2 = '日'"
+            >日</span
+          >
+        </div>
+        <div class="tip">
+          <span>今日用煤量</span><span>870</span><span>t</span><span>↑</span>
+        </div>
+        <div id="qcyml"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="qcssdh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>全厂实时电荷</p>
+        </div>
+        <div class="data">
+          <span :class="res3 == '年' ? 'active' : ''" @click="res3 = '年'"
+            >年</span
+          >
+          <span :class="res3 == '月' ? 'active' : ''" @click="res3 = '月'"
+            >月</span
+          >
+          <span :class="res3 == '日' ? 'active' : ''" @click="res3 = '日'"
+            >日</span
+          >
+        </div>
+        <div class="chartBox">
+          <div id="qcssdh"></div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res4 == '年' ? 'active' : ''" @click="res4 = '年'"
+            >年</span
+          >
+          <span :class="res4 == '月' ? 'active' : ''" @click="res4 = '月'"
+            >月</span
+          >
+          <span :class="res4 == '日' ? 'active' : ''" @click="res4 = '日'"
+            >日</span
+          >
+        </div>
+        <div class="chartBox">
+          <div id="tpfl"></div>
+        </div>
+      </div>
+      <div class="scydpm">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>生产用电排名</p>
+        </div>
+        <div class="chartBox">
+          <div class="chartbox" v-for="item in list">
+            <div class="bigBox">
+              <div class="smallBox" :style="{ width: `${0.5 * item.value}px` }">
+                {{ item.name }}
+              </div>
+            </div>
+            <span style="color: #43fff1">{{ item.value }}kWh</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      res: "月",
+      res1: "月",
+      res2: "月",
+      res3: "月",
+      res4: "月",
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "用电量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:kWh",
+          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",
+            name: "用电量",
+            symbolSize: 15,
+            data: [280, 350, 120, 270, 290],
+            itemStyle: {
+              normal: {
+                color: "#019BEC",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#019BEC", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        legend: {
+          data: [{ icon: "rect", name: "用水量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          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",
+            name: "用水量",
+            symbolSize: 15,
+            data: [280, 350, 120, 270, 290],
+            itemStyle: {
+              normal: {
+                color: "#43FFF4",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#43FFF4", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        legend: {
+          data: [{ icon: "rect", name: "用煤量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          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: "用煤量",
+            symbolSize: 15,
+            data: [280, 350, 120, 270, 290],
+            itemStyle: {
+              normal: {
+                color: "#09E83E",
+                label: {
+                  show: true, //开启显示
+                  position: "top", //在上方显示
+                  value: "max",
+                  textStyle: {
+                    //数值样式
+                    color: "#09E83E",
+                    fontSize: 30,
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+      option4: {
+        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: 15,
+            data: [280, 350, 120, 270, 290],
+            itemStyle: {
+              normal: {
+                color: "#21FF55",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21FF55", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      option5: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          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: "碳排放量",
+            symbolSize: 15,
+            data: [280, 350, 120, 270, 290],
+            itemStyle: {
+              normal: {
+                color: "#11C3FF",
+                label: {
+                  show: true, //开启显示
+                  position: "top", //在上方显示
+                  value: "max",
+                  textStyle: {
+                    //数值样式
+                    color: "#11C3FF",
+                    fontSize: 30,
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+      list: [
+        {
+          name: "1号生产线",
+          value: "1520",
+        },
+        {
+          name: "3号生产线",
+          value: "927",
+        },
+        {
+          name: "2号生产线",
+          value: "628",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("qcydl", this.option1);
+    this.defineEcharts("qcysl", this.option2);
+    this.defineEcharts("qcyml", this.option3);
+    this.defineEcharts("qcssdh", this.option4);
+    this.defineEcharts("tpfl", this.option5);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  background-color: transparent;
+  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;
+  }
+  .qcydl {
+    position: relative;
+    margin-top: 56px;
+    .tip {
+      margin-left: 20px;
+      font-size: 20px;
+      position: absolute;
+      color: #fff;
+      top: 110px;
+      span:nth-of-type(1) {
+        margin-right: 30px;
+      }
+      span:nth-of-type(2) {
+        color: #00a8ff;
+        font-weight: 600;
+      }
+      span:nth-of-type(4) {
+        color: #00a8ff;
+      }
+    }
+    .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";
+      }
+    }
+    #qcydl {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+  .qcysl {
+    position: relative;
+    margin-top: 56px;
+    .tip {
+      margin-left: 20px;
+      font-size: 20px;
+      position: absolute;
+      color: #fff;
+      top: 110px;
+      span:nth-of-type(1) {
+        margin-right: 30px;
+      }
+      span:nth-of-type(2) {
+        color: #43fff4;
+        font-weight: 600;
+      }
+      span:nth-of-type(4) {
+        color: #43fff4;
+      }
+    }
+    .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";
+      }
+    }
+    #qcysl {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+  .qcyml {
+    position: relative;
+    margin-top: 56px;
+    .tip {
+      margin-left: 20px;
+      font-size: 20px;
+      position: absolute;
+      color: #fff;
+      top: 110px;
+      span:nth-of-type(1) {
+        margin-right: 30px;
+      }
+      span:nth-of-type(2) {
+        color: #09e83e;
+        font-weight: 600;
+      }
+      span:nth-of-type(4) {
+        color: #09e83e;
+      }
+    }
+    .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";
+      }
+    }
+    #qcyml {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+}
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .qcssdh {
+    position: relative;
+    margin-top: 150px;
+    .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;
+    }
+  }
+  .tpfl {
+    position: relative;
+    margin-top: 150px;
+
+    .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";
+      }
+    }
+    #tpfl {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+  .scydpm {
+    position: relative;
+    margin-top: 150px;
+
+    .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: 100%;
+        color: #fff;
+        font-size: 30px;
+        align-items: center;
+        display: flex;
+        margin-top: 40px;
+        .bigBox {
+          width: 924px;
+          height: 96px;
+          background-color: #273546;
+          .smallBox {
+            border-radius: 10px;
+            height: 96px;
+            line-height: 96px;
+            text-indent: 20px;
+            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) {
+            color: #43fff1;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/lll/NYJCD.vue b/src/views/lll/NYJCD.vue
index f134c7f..6488433 100644
--- a/src/views/lll/NYJCD.vue
+++ b/src/views/lll/NYJCD.vue
@@ -353,7 +353,7 @@ export default {
 .box {
   width: 100%;
   height: 100%;
-  padding-top: 500px;
+  padding-top: 400px;
   box-sizing: border-box;
   background-color: transparent;
   display: flex;
diff --git a/src/views/lll/PDS.vue b/src/views/lll/PDS.vue
index 95fb8e3..86bb1db 100644
--- a/src/views/lll/PDS.vue
+++ b/src/views/lll/PDS.vue
@@ -39,7 +39,7 @@ export default {
 .box {
   width: 100%;
   height: 100%;
-  padding-top: 500px;
+  padding-top: 400px;
   box-sizing: border-box;
   display: flex;
   background-color: transparent;
diff --git a/src/views/lll/ZNYW.vue b/src/views/lll/ZNYW.vue
index ce25f82..6065fcf 100644
--- a/src/views/lll/ZNYW.vue
+++ b/src/views/lll/ZNYW.vue
@@ -494,7 +494,7 @@ export default {
 .box {
   width: 100%;
   height: 100%;
-  padding-top: 500px;
+  padding-top: 400px;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;